Overscroll: Contain

Have you ever had the problem that a dropdown or a side menu have to much content for its container, so you need to scroll inside the container. And when you reach the bottom of the container the content behind starts scrolling. The browser support for Overscroll control is now getting better and soon can be implemented on all browsers.

Share link
How it works without code
How it works with code
My source

The code I used. But please come with corrections if you have any, I’m not a developer in any way.

.scroll {
  overflow: auto;
  overscroll-behavior: contain;
}
4 Likes

(Wow I was on Chrome 58 :smiley: )

It’s working great! So simple. I hope it makes it to Webflow UI, at times.

It’s not yet super greatly supported though.

http://vincent.polenordstudio.fr/snap/d5g2z.jpg

I’ve been using a JS to prevent that but it’s dirty as it hacks the scroll and the scroll feels different after that.

I made a template with a solution for now that I found here: How to: Prevent Body From Scrolling When Overlay Is On | Have Fun Learning (I still have to finish the template…) I use this on a couple of sites and it works like a charm.

Thanks for sharing the overscroll property, I didn’t know, and it’s going to be super helful for my own projects where I don’t care too much about browser compatibility. Also great to know tht this issue will be solved very soon when all the browsers supports this property. :slight_smile:

1 Like

Yes, to bad safari is not supporting any time soon :confused:
Thank you for the link, I’ll check that out as well!

Is it because the background content is set to overflow auto?

.background-content{
  height: 100%;
  overflow: auto;
  ...

Sometimes there are surprises with Safari!

yes.
When in place it works flawless.

1 Like

Please try to format your code in your posts. Poorly formatted questions are difficult to understand.

To format code, select each code block and click the (Preformatted text) button.

Screenshot_2018-02-01_100238

I have done this for your post this time. Next time it won’t be free.

1 Like

is the bellow html?

.scroll {
overflow: auto;
overscroll-behavior: contain;
}