How to emulate CSS Scroll Snap Points in Chrome?
Solution 1
Chrome 69 will contain the feature. No workaround needed.
Just sit and wait. Just sit and wait :-)
Solution 2
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 createScrollSnap from 'scroll-snap'
const element = document.getElementById('container')
const { bind, unbind } = createScrollSnap(element, {
snapDestinationX: '0%',
snapDestinationY: '90%',
timeout: 100,
duration: 300,
threshold: 0.2,
snapStop: false,
easing: easeInOutQuad,
}, () => console.log('snapped'))
// remove the listener
// unbind();
// re-instantiate the listener
// bind();
Solution 3
I found a polyfill: https://github.com/zigotica/scrollSnapPointsPolyfill
Haven't tested it extensively.
Solution 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.
Solution 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]
Related videos on Youtube
MartyIX
Updated on October 08, 2022Comments
-
MartyIX over 1 year
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 CSS styles:
-webkit-scroll-snap-type: mandatory; -ms-scroll-snap-type: mandatory; scroll-snap-type: mandatory; -webkit-scroll-behavior: smooth; -ms-scroll-behavior: smooth; scroll-behavior: smooth; -webkit-scroll-snap-points-y: repeat(600px); -ms-scroll-snap-points-y: snapInterval(0px, 600px); /* Old syntax */ scroll-snap-points-y: repeat(600px); overflow-y: auto; overflow-x: hidden;
until the feature is implemented by Chrome?
-
DavidTaubmann over 7 yearsI believe it doesn't work with pixel units, only vh or %
-
DavidTaubmann over 7 yearsit seems to depend on css classes to be implemented, that's not exactly a polyfill
-
filoxo over 7 years@davidtaubmann you must've missed that the scrollsnap-polyfill documentation says that it works with
vh/vw
,percentages
, andpixels
. -
DavidTaubmann over 7 yearsAfter testing a lot, it never worked with pixels. All the examples found that where correctly working stopped working once I changed the CSS values to pixels. If you have a working example that's focused on pixels, I would appreciate it a lot.
-
Santiago Barchetta about 5 yearsTwo days trying to making work this lib with no good results. I'm trying to use it inside a React stateless component. I see that the container div is modified by the lib (add the overflow:auto style) but then never call the callback with the scroll event.
-
Luca Falasco about 5 yearshey @SantiagoBarchetta , here you can find an example usage of the library with React, in case it may help. Otherwise, I'm happy to help you debug the issue if you can provide a link with an example of your use case :)
-
ESR over 3 yearsCouldn't get the plugin to work with PX values or percentages that weren't integers
-
Luca Falasco over 3 yearsHi @ESR , thanks for your feedback, pixel values as well as floating point numbers are supported starting from v3.2.1