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

Code example:

import scrollSnapPolyfill from 'css-scroll-snap-polyfill'

// whenever dom is ready
scrollSnapPolyfill()

Usage with React:

// must use inside componentDidMount so that the DOM is ready
componentDidMount() {
  scrollSnapPolyfill()
}

Dependencies

This uses Polyfill.js by @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 from Github user @ckrack.

Length units for scroll-padding are limited to:

• vh/vw
• percentages
• pixels

Roadmap

• Code clean up
• Testing
• 100% parity with spec

License

MIT.