How to emulate CSS Scroll Snap Points in Chrome?

Question

Firefox 39, Safari 9 and IE11 provide support for CSS Scroll Snap Points. Chrome has the feature in development.

Is there a polyfill that would emulate the following

Answer 1

If you're willing to consider a vanilla javascript re-implementation of this feature with a consistent cross browser behaviour you can use this library

Why

The main reason to use this instead of the native css solution is that it works in all modern browsers and has a customizable configuration to allow custom timing in transitions and scrolling detection.

How

The library re-implements the css snapping feature using vanilla javascript easing functions, and works using the values of the container element's scrollTop/scrollLeft properties and the scroll Event Listener

Example

import ScrollSnap from 'scroll-snap'

const snapConfig = {
  scrollSnapDestination: '90% 0%', // scroll-snap-destination css property, as defined here: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination
  scrollTimeout: 100, // time in ms after which scrolling is considered finished
  scrollTime: 300 // time in ms for the smooth snap
}

function callback () {
  console.log('called when snap animation ends')
}

const element = document.getElementById('container')
const snapObject = new ScrollSnap(element, snapConfig)

snapObject.bind(callback)

// unbind the element
// snapObject.unbind();

Answer 2

Chrome 69 will contain the feature. No workaround needed.

---

Just sit and wait. Just sit and wait :-)

Answer 3

I found a polyfill: https://github.com/zigotica/scrollSnapPointsPolyfill

Haven't tested it extensively.

Answer 4

Here's another polyfill: https://github.com/ckrack/scrollsnap-polyfill/

It should also be noted that the specification for CSS Snap Points has changed and no longer includes some of the properties asked for, as well as adding new ones.

Answer 5

Very poor working of this stuff on this moment, scrolling on Google works only with ovrflow:auto container property correctly for scroll-snap-align property of items and scroll padding property for each item in container.

[https://webdesign.tutsplus.com/tutorials/how-to-scroll-snap-using-css--cms-30333][1]