How to fix background scroll issues in CSS


Fixing double scroll issues in CSS using overscroll-behavior

11 Nov, 2021 · 2 min read

I’m sure you’ve seen this before. You have a long page and perhaps a modal with a scroll inside it.

Super annoying if the background scrolls with when you hit bottom right?

See this example below.

As you can see, scrolling inside the modal and hitting bottom or top of the content will also scroll the background.

This is not what we want as we scroll inside the modal content.

Introducing overscroll-behavior

Say hello to overscroll-behavior, the welcome addition to scroll element which tells how the over scroll behavior should be handled.

It takes one of the following properties:

  • auto: What it used to be, so back to normal
  • contain: Inside the element, your scroll is as usual, but no outside elements are affected
  • none: No outside elements are affected, and default scroll overflow behavior is prevented.

With every overflow, you can specify on which axis it should occur.

For horizontal scrolling, use: overscroll-behavior-x. And for vertical scroll use: overscroll-behavior-y.

Let’s try it out on our demo modal by adding the following CSS to our modal element.

overscroll-behavior-y: contain;

And now try it out in this Codepen example to see what happens!

See the Pen Untitled by Chris Bongers (@rebelchris) on CodePen.

Browser support

The support is becoming pretty good. Unfurtionally it’s not a solid feature to rely on.

Let’s hope we get full support soon, as this is a real live saver 👀.

The browser support for the overscroll-behavior feature

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Modifying an SVG path with CSS

10 Dec, 2022 · 2 min read

Modifying an SVG path with CSS

Animate an SVG path with CSS

9 Dec, 2022 · 2 min read

Animate an SVG path with CSS

Join 2099 devs and subscribe to my newsletter