css-scroll-snap-polyfill

0.1.2 • Public • Published

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

import scrollSnapPolyfill from 'css-scroll-snap-polyfill'
 
// whenever dom is ready
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

License

MIT.

Readme

Keywords

none

Package Sidebar

Install

npm i css-scroll-snap-polyfill

Weekly Downloads

4,831

Version

0.1.2

License

none

Last publish

Collaborators

  • kanzelm3