Published

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.

Adding 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 body.