CODEWITHSUNDEEP
cssscroll-snap-points
mrseanbaines
mrseanbaines

Reputation: 833

Alternative to CSS scroll-snap?

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?

Upvotes: 4

Views: 2843

Answers (2)

Alvaro
Alvaro

Reputation: 41595

Scroll Snapping doesn't work as well as some believe it does.

It behaves differently on different browsers, depending on whether you use a trackpad or a mouse wheel, etc.

Then it has some big limitations too.

So, if you are looking for compatibility and consistency, I'd recommend you check out fullPage.js if you are ok using JavaScript.

Upvotes: 0

Bill Geoghegan
Bill Geoghegan

Reputation: 81

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.

Upvotes: 3

Related Questions