0

I'm trying to prevent body scrolling on mobile devices when an overlay element is open (for example a modal or a sidebar or a fullscreen menu, etc).

I want to use the CSS property overscroll-behavior that in my case has the required compatibility (I don't want to use old JS hacks). Here are some good references:

https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/ https://benfrain.com/preventing-body-scroll-for-modals-in-ios/ https://codepen.io/benfrain/full/wvayeWq

overscroll-behavior seems working very well except on Safari mobile, in the specific case the overlay element is not scrollable. This is confirmed also by this article:

An interesting thing to keep in mind though is that when the navigation is short (and thus isn’t scrollable), and a user tried to scroll for no reason, the body will scroll, even if overscroll-behavior-y: contain is set.

Solving this specific case, we could have the perfect-native solution to handle the scrolling of overlay elements!

Someone have a solution?

var btn = document.getElementById("btn"); btn.addEventListener("click", e => { document.documentElement.setAttribute("data-modal-active", document.documentElement.getAttribute("data-modal-active") === "true" ? "false" : "true") });
html,body { font-family: sans-serif; } html[data-modal-active="true"] { touch-action: none; overscroll-behavior: none; -webkit-overflow-scrolling: auto; overflow: hidden; } [data-modal-active="true"] body { touch-action: none; overscroll-behavior: none; -webkit-overflow-scrolling: auto; overflow: hidden; } aside { position: absolute; z-index: 100; background-color: #777; top: 50%; left: 50%; overflow: auto; max-height: 80vh; transform: translate(-50%, -50%); display: none; flex-direction: column; overscroll-behavior-y: contain; overflow-y: auto; } [data-modal-active="true"] aside { display: flex; }
<button id="btn">Modal</button> <main> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> </main> <aside> Here is a fantastic modal. It has things in: <div class="thing">thing 1</div> <div class="thing">thing 2</div> <div class="thing">thing 3</div> </aside> <button id="btn">Modal</button> <main> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro. </p> </main> <aside> Here is a fantastic modal. It has things in: <div class="thing">thing 1</div> <div class="thing">thing 2</div> <div class="thing">thing 3</div> </aside>

Improve this question
3
  • This is still a css hack because it is not the overscroll-behaviour use case. you could probably make the element scrollable and hide the scrollbar to achieve what you want, but i think "old js hack" is still the best way to go. w3schools.com/howto/howto_css_hide_scrollbars.asp Commented Jul 18, 2024 at 9:15
  • @Symtox Mmh, they're just opinions but I find a lot less hacky this pure CSS solution than the JS ones. I tried some well done JS libraries (punctually abandoned) that are crazy, messing with touch event and more. IMO very risky and depending from browsers updates. Commented Jul 19, 2024 at 7:49
  • If i have time today i'll try to share something with css only, provided it works lol Commented Jul 19, 2024 at 7:54

1 Answer 1

Reset to default
0

I came up with something, but please don't do this. OP does not want any javascript involved, but i suggest to use the old fashion way as this is a css "hack" and an absolute horror.

To explain a bit more how it works: This modal (absolute positioned div) should be unscrollable, and scrolling into it should not make the body scroll using the overflow-behavior property. Here is the problem: An unscrollable element, even with overflow: scroll does not "trigger" the overflow behavior. The modal has to be overflowed to trigger it. In order to achieve this, set a value for the modal height, and add an invisible overflowing div (here, the .filler div). Then hide the scrollbar and put the modal content in a sticky div that will stay at the top of the modal so it does not scroll with the modal. because yes, the modal is scrolling, but you cannot see it.

body { background: grey; height: 1000px; overflow-y: auto; } .modal-content { position: sticky; top: 0; left: 0; } .filler { height: 4000px; visibility: hidden; } .modal { position: absolute; height: 200px; width: 200px; background: white; left: 50%; overflow-y: scroll; transform: translateX(-50%); overscroll-behavior: none; } /* From https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */ /* Hide scrollbar for Chrome, Safari and Opera */ .modal::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .modal { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
<div class="modal"> <div class="modal-content"> This is a an unscrollable modal </div> <div class="filler"> </div> </div>

edit: I only tested it on chrome 126.0

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! I'm going to try it. What would be the "old fashion way" (with JS?) you suggest?
Soemthing like this: css-tricks.com/prevent-page-scrolling-when-a-modal-is-open

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.