css-scroll-snap-polyfill
Version:
Polyfill for CSS scroll snapping draft.
63 lines (38 loc) • 1.42 kB
Markdown
# css-scroll-snap-polyfill
Polyfill for CSS scroll snapping draft.
## Usage
#### Yarn
`yarn add css-scroll-snap-polyfill`
#### NPM
`npm install --save css-scroll-snap-polyfill`
```js
import scrollSnapPolyfill from 'css-scroll-snap-polyfill'
// whenever dom is ready
scrollSnapPolyfill()
```
## Dependencies
This uses [Polyfill.js](https://github.com/philipwalton/polyfill) by [@philipwalton](https://github.com/philipwalton), which is bundled.
No other dependencies.
Browser Support
---------------
This has been tested successfully in the following browsers:
* Chrome 63
* Firefox 57
* Safari 11
Standards documentation
-----------------------
* https://www.w3.org/TR/css-scroll-snap-1/
Limitations
-----------
It will not work properly when you use margins on the scroll-snap container or
it's children due to there being a mismatch between the parent and child offsets,
which are used to make calculations.
This polyfill only supports the properties in the new spec, not the older deprecated
properties like `scoll-snap-points`, `scroll-snap-coordinate`, and `scroll-snap-destination`.
If you want to use those older properties (not recommended) you can use [scrollsnap-polyfill](https://github.com/ckrack/scrollsnap-polyfill) from Github user [@ckrack](https://github.com/ckrack).
Length units for `scroll-padding` are limited to:
* vh/vw
* percentages
* pixels
## License
[MIT](LICENSE).