Skip to content

Commit

Permalink
Use basic fallback for document.scrollingElement (#15)
Browse files Browse the repository at this point in the history
* Update version and tags.

* Use basic fallback for `document.scrollingElement`.

* Update `README.md`.
  • Loading branch information
calvellido committed Feb 18, 2020
1 parent d07c4a2 commit 5a0ae02
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 3 deletions.
21 changes: 21 additions & 0 deletions README.md
Expand Up @@ -40,6 +40,27 @@ https://caniuse.com/#feat=mdn-api_htmlelement_focus_preventscroll_option
https://bugs.webkit.org/show_bug.cgi?id=178583


## document.scrollingElement

This polyfill uses a basic fallback for the [document.scrollingElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement) property, using `document.documentElement` when not found.

This could suffice in basic cases, but if you need wider and/or specific support you should refer to a polyfill for it:

* https://github.com/mathiasbynens/document.scrollingElement

Also, to overcome its absence if you are executing this polyfill through [`jsdom`](https://github.com/jsdom/jsdom), you could place this in your setup:

```js
document.scrollingElement = document.documentElement
```

More context about this property can be found in:

* https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement
* https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
* https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement


## Dev and testing

To check this polyfill you can do:
Expand Down
6 changes: 4 additions & 2 deletions index.js
Expand Up @@ -37,8 +37,10 @@
var calcScrollableElements = function(element) {
var parent = element.parentNode;
var scrollableElements = [];
var rootScrollingElement =
document.scrollingElement || document.documentElement;

while (parent && parent !== document.scrollingElement) {
while (parent && parent !== rootScrollingElement) {
if (
parent.offsetHeight < parent.scrollHeight ||
parent.offsetWidth < parent.scrollWidth
Expand All @@ -51,7 +53,7 @@
}
parent = parent.parentNode;
}
parent = document.scrollingElement;
parent = rootScrollingElement;
scrollableElements.push([parent, parent.scrollTop, parent.scrollLeft]);

return scrollableElements;
Expand Down
5 changes: 4 additions & 1 deletion package.json
@@ -1,6 +1,6 @@
{
"name": "focus-options-polyfill",
"version": "1.3.0",
"version": "1.4.0",
"description": "JavaScript polyfill for the WHATWG spec of focusOptions, that enables a set of options to be passed to the focus method.",
"main": "index.js",
"scripts": {
Expand All @@ -16,6 +16,9 @@
"polyfill",
"javascript-polyfill",
"focus",
"options",
"focusOptions",
"preventScroll",
"whatwg",
"whatwg-dom",
"js"
Expand Down

0 comments on commit 5a0ae02

Please sign in to comment.