iOS safari: scrolling is broken inside position: fixed; elements

Asked 13/10, 2020 at 23:34 Answered 13/4, 2023 at 7:40

Solved html css ios scroll mobile-safari

Inside a position: fixed; element, scrolling elements will "lock" if you try to scroll them the wrong way at the start of a touch.

Example: touch the screen and drag downwards, then back up. The element won't scroll. If you release, wait a few seconds, then try dragging upwards, it will scroll.
http://12me21.github.io/scroll-test.html

body {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}
#scroll-container {
   overflow-y: scroll;
   height: 100%;
}
#scroller {
   height: 200vh;
   font-size: 50px;
}

<body>
   <div id=scroll-container>
      <div id=scroller>Test<br>more text</div>
   </div>
</body>

This answer: https://mcmap.net/q/57754/-div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling seems to be the same problem I'm having, but the fix no longer works. It seems to happen inside all fixed elements and isn't caused by -webkit-overflow-scrolling: touch; anymore.

Is there any way to fix this now? Or do I just need to avoid position: fixed; entirely?

Rheumatoid answered 13/10, 2020 at 23:34 Comment(1)

might be duplicate / related to #41595497 – Rheumatoid 1/4, 2022 at 0:25

Adding overflow: hidden; to <html> or <body> seems to fix it.
I'm not sure why this works, but I assume the problem is that safari is trying to scroll html/body instead of the element you want.
Because the scrollable section is inside a position:fixed element, scrolling the body has no visual effect, so it looks like nothing is happening.

Rheumatoid answered 14/10, 2020 at 0:1 Comment(0)

You can use :

overscroll-behavior: contain;

this will scroll only the child and no more the parent.

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Wil answered 13/4, 2023 at 7:40 Comment(0)

-1

I had a same problem and overflow hidden help to stop scrolling body element, but it also disable scrolling webpage if visitor wants to. So I created JQ solution to add class .overflow-hidden to body element, only when I need it. In my case when sidebars has active class.

$(document).click(function(){
    if ($(".siderbar_menu").hasClass("side-menu-active")) {
        $("body").addClass("overflow-hidden-mobile");
    } else {
        $("body").removeClass("overflow-hidden-mobile");
    };
});

Works for me.

Kooky answered 15/9, 2022 at 9:38 Comment(0)

Recommended topics

Hot tags