overscroll-behavior-y: contain not working on non-scrollable element

Question

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>

Answer 1

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