Alternative to CSS scroll-snap?

Question

I have tested CSS scroll-snap on Chrome version 75.0.3770.100 and Firefox version 67.0.3 It works beautifully in Chrome, but I am getting strange results in Firefox. According to MDN, Firefox only started supporting the new spec for scroll-snap from version 68, and I can confirm that with the new spec, it doesn't work at all:

.parent {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

However, using the old spec (as is suggested), it seems to sort of work, but is extremely janky and erratic and seems to scroll backwards a lot of the time:

.parent {
  scroll-snap-type: mandatory;
}

.child {
  scroll-snap-coordinate: 0 0;
}

I have not found any solution (CSS or JS) that replicates this behaviour in my version of Firefox (which isn't old at all!). The best solution I've had so far is my own custom JS alternative, which simply waits for the user to stop scrolling, and then smooth scrolls them to the nearest snap point. This isn't ideal though, as it doesn't feel very natural - it slows down to a natual stop and then auto-scrolls you to the snap point.

Here's my Codepen playground: https://codepen.io/mrseanbaines/pen/WqErwZ?editors=0100. If I load this same pen in both browsers, I get the behaviours described above.

Has anyone come across any soutions to this?

Answer 1

I agree that the Firefox scroll-snap feels much better. An option I had come across that imitates CSS snap-points, if you're willing to use JavaScript, is https://github.com/lucafalasco/scroll-snap

By default, it will operate like it does on Chrome, but if you were to set the timeout to 1, it will snap immediately, like in Firefox. I've forked their react example and changed the config to work cross-browser as it would in Firefox: https://codesandbox.io/s/scroll-snap-react-5tssq

Note: It currently doesn't have the same subtle easing that Firefox does, but it's pretty difficult to notice a difference.