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
.