https://github.com/calvellido/focus-options-polyfill
JavaScript polyfill for the WHATWG spec of focusOptions, that enables a set of options to be passed to the focus method
https://github.com/calvellido/focus-options-polyfill
focus javascript javascript-polyfill options polyfill preventscroll whatwg whatwg-dom
Last synced: 5 months ago
JSON representation
JavaScript polyfill for the WHATWG spec of focusOptions, that enables a set of options to be passed to the focus method
- Host: GitHub
- URL: https://github.com/calvellido/focus-options-polyfill
- Owner: calvellido
- License: mit
- Created: 2018-06-26T15:48:16.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-04T12:10:32.000Z (almost 4 years ago)
- Last Synced: 2024-11-28T15:42:23.494Z (6 months ago)
- Topics: focus, javascript, javascript-polyfill, options, polyfill, preventscroll, whatwg, whatwg-dom
- Language: HTML
- Homepage: https://html.spec.whatwg.org/multipage/interaction.html#dom-focus
- Size: 146 KB
- Stars: 46
- Watchers: 3
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# focus-options-polyfill
[](https://npmjs.com/package/focus-options-polyfill "View this project on npm")
JavaScript polyfill for `focusOptions`, an optional property passed to `HTMLElement.focus()` that contains the `preventScroll` boolean, which controls whether the browser should prevent a focused element from being scrolled into view.
## Current support
https://caniuse.com/#feat=mdn-api_htmlelement_focus_preventscroll_option
## Docs
* WHATWG Spec
https://html.spec.whatwg.org/multipage/interaction.html#dom-focusoptions-preventscroll
* MDN Web Docs - focus
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
## Intents to implement
* Chrome/Chromium: Chrome Platform Status issue 734166 - Prevent scrolling in HTMLElement.focus()
https://www.chromestatus.com/feature/5745122025144320
* Edge: Issue 14314565 - Enable ability to prevent scrolling in Element.focus()
https://web.archive.org/web/20190401133643/https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14314565/
* Firefox: Bug 1374045 - Consider adding support for customizing scrolling behavior with Element.focus
https://bugzilla.mozilla.org/show_bug.cgi?id=1374045
* Safari: WebKit Bug 178583 - Enable ability to prevent scrolling in Element.focus()
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:
```bash
npm run dev
```
to launch a small page that will check browser/polyfill behaviour.