CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxscroll
James Burton
James Burton

Reputation: 756

Increase Sensitivity of Scroll Snapping in Google Chrome

I have implemented a design for my website using scroll snapping via scroll-snap-align documented here and scroll-snap-type documented here.

The implementation works, however on Google Chrome the user must scroll quite "firmly" in order to move to the next section. On the other hand only one "tick" of the scroll wheel is required to move to the next section on Firefox. The behaviour on Firefox is much more desirable whereas the Chrome behaviour feels clunky and unnatural.

I'm wondering if there is a way to adjust the scroll sensitivity on Chrome or something along those lines in order to achieve the same behaviour that is present in Firefox.

I have created a JSFiddle with a minimal implementation that demonstrates the different behaviour across the aforementioned browsers.

Thanks in advance.

EDIT: The behaviour in the JSFiddle (and indeed on my website) has now changed to something different but equally unsatisfactory. Now scrolling down one "notch" on the mousewheel causes the scroll snap to go 2 sections down instead of 1, I have created a new JSFiddle with a 4th section to confirm that the scrolling goes down 2 sections and not straight to the final section. I have been unable to find a reference to the update or change in specification that caused this.

Upvotes: 6

Views: 1912

Answers (1)

Asher Lim
Asher Lim

Reputation: 416

I ran into the same issue described above and so I turned to https://lucafalasco.github.io/scroll-snap/. I've personally tested it on Chrome and Firefox and it seems to work well - that is to say, scrolling with the mouse wheel does not skip sections. I'm not intending to support IE11 so this serves my purpose.

Upvotes: 1

Related Questions