9

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://stackoverflow.com/a/51733026/6232794 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?

12Me21
  • 992
  • 10
  • 22
  • might be duplicate / related to https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi?rq=1 – 12Me21 Apr 01 '22 at 00:25

3 Answers3

8

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.

12Me21
  • 992
  • 10
  • 22
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

hamzawi
  • 321
  • 3
  • 10
-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.

Lukas
  • 1