Skip to content
JS polyfill for CSS scroll snap points.
Branch: master
Clone or download

README.md

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

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.

You can’t perform that action at this time.