CODEWITHSUNDEEP
htmlcssiosscrollmobile-safari
12Me21
12Me21

Reputation: 1169

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

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?

Upvotes: 9

Views: 8966

Answers (3)

hamzawi
hamzawi

Reputation: 390

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

Upvotes: 0

Lukas
Lukas

Reputation: 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.

Upvotes: -1

12Me21
12Me21

Reputation: 1169

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.

Upvotes: 8

Related Questions