Fix for overflow at top / bottom of screen when using CSS Scroll Snap
I’m currently working on a site that uses CSS Scroll Snap to frame some of the content nicely as you scroll through. In Chrome though, I was getting weird overflow issues at the top and bottom of the screen. If I scrolled to the bottom and then kept attempting to scroll down, it would gradually add more and more length to the page. Same with scrolling back up.
overscroll-behavior-y: none; to the
body element sorted it out. Read more about
overscroll-behavior on MDN.
I originally tried to add this property to the
html element since that’s the element with
scroll-snap-type: y mandatory;. This didn’t work though, it seems that
overscroll-behavior has to be on