Fix scroll “bounce” with CSS

December 1, 2023

Earlier this week, I found out about a solution to something that has bothered me for some time. (Thanks Michelle Barker!) The problem is when you scroll through a website and the browser allows you to scroll past the uppermost or lowermost part of the page before returning to the correct position.

It creates this “bounce” effect. It can expose the body background color, which might differ from your header. It gives a very professional design a less elegant look. I have created generated content in CSS or caused the header (or footer) element to extend past the top (or bottom) of the page to maintain the same background color as the header or footer.

Above is an example of scroll “bounce” on this site. I used a colored background on the body and a clip-path on the main content section with a white background to solve for having the background color the same as the header and footer when the browser scrolls past it.

I just kind of accepted that this is the behavior of the browser and created solutions like the one I described above to make it a bit more elegant. I did not know that there was a way to fix that and have the browser behave more like it once did (not over-scrolling past the top or bottom of the HTML. Michelle Barker posted a solution to this problem the past week.

It uses a CSS property that I was not as familiar with, overscroll-behavior. This property has had browser support since 2017/2018.

:root {
  overscroll-behavior: none;
}

Such a simple fix. This was a nice little gem to come across.

The overscroll-behavior property can also be used to prevent the body element from scrolling when you have a modal or dialog that is fixed position and has scrollable content. I keep forgetting to look for opportunities to use this “trick” that I got from Ahmad Shadeed.

.modal {
  overscroll-behavior-y: contain;
  overflow-y: auto;
}

You will want to add the overscroll-behavior to the element that you want to contain the scroll. Ahmad’s article has many more examples of use cases where this trick can come in handy.