16

I am looking for a CSS solution to implement the exact behavior of "overscroll-behavior: contain" but for when the target element has no overflow.

I have a page with a pop-in sidebar/menu that, on mobile, takes up 100vw and 100vh (minus bottom navigation bar) and does not overflow (there is not enough content to need scrollbars). Currently when this sidebar is open on mobile, if the user tries to scroll it, the main page in the background scrolls, which in this app can result in unwanted database calls due to lazy loading/infinite scroll.

Here is a minimal codesandbox demo:

Edit Consecutive Material-UI Snackbars

On line 55 of demo.js I have added the overscrollBehavior: "contain" property to the JSS, but as you can see, it does not contain the scroll chain, unless you shrink the vertical height of the browser to force the content of the sidebar to overflow first. (On Chrome the overscrollBehavior seemed to have the expected behavior in the codesandbox editor, but not when popped out in its own window.)

Surely there is a CSS solution to get this behaviour without the element having to be scrollbable first?

Interestingly, on Firefox at least, if you shrink the vertical height to force scroll on the side bar, once you resize the browser back to normal, the overscroll-behavior property continues containing the scroll chain until you refresh the page, which is the behaviour I'm looking for, though obviously on initial page load.

Here is a simple codepen showing the difference in overscroll-behavior for elements which do and do not overflow, if it's not already clear. I also found another post on the CSS Tricks forum from 2018 of someone asking about this behaviour, but with no solution.

benmneb
  • 1,773
  • 1
  • 15
  • 26
  • Just to make sure I understand - from the description in e.g. [link]https://developer.mozilla.org/en-US/docs/web/css/overscroll-behavior it seems overscroll-behavior: contain should do what you want but you are finding that it isn't in the case of no overflow and that. it is chaining the scroll? – A Haworth Oct 25 '20 at 07:25
  • 2
    yes i think that is correct. if there is no overflow in the target container, `overscroll-behavior: contain` behaves as if its not there – benmneb Oct 25 '20 at 09:13
  • Also looking for the same thing, but for web. And that ^ is exactly my case as well. I have 3 different areas of a menu div, each 33.33% the width of the parent container. The sub categories of a category will open from left to right, and as such can be of varying height. They should be confined to the size of the container, and scroll if needed. Now, the overflow-behaviour works correct and doesn't bubble up scroll to the html element, on whichever of these is scrollable at the time, but is ignored when there aren't enough categories., – Kim Skogsmo Jul 06 '21 at 11:47
  • by "not for web" do you mean non-react website? cause the answer im after for this question would apply to any website using CSS, react or not – benmneb Jul 07 '21 at 03:19

0 Answers0