diff --git a/README.md b/README.md index f836577..98f9665 100644 --- a/README.md +++ b/README.md @@ -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: diff --git a/index.js b/index.js index 9647bec..c1bb63e 100644 --- a/index.js +++ b/index.js @@ -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 @@ -51,7 +53,7 @@ } parent = parent.parentNode; } - parent = document.scrollingElement; + parent = rootScrollingElement; scrollableElements.push([parent, parent.scrollTop, parent.scrollLeft]); return scrollableElements; diff --git a/package.json b/package.json index c16ebf1..285aed3 100644 --- a/package.json +++ b/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": { @@ -16,6 +16,9 @@ "polyfill", "javascript-polyfill", "focus", + "options", + "focusOptions", + "preventScroll", "whatwg", "whatwg-dom", "js"