Div scrolling freezes sometimes if I use -webkit-overflow-scrolling

Ios Problem Overview

if I use -webkit-overflow-scrolling for a scrolling div, it scrolls perfectly with native momentum. But, div itself sometimes freezes and does not respond my finger moves. After 2-3 seconds later, it becomes again scrollable.

I don't know how I am reproducing this problem. But, as I see there are two main behavior creates this situation.

First, If I wait for a while, for instance, 20 seconds, and touch the div, it does not respond. I wait a couple of seconds, and it becomes working again.

Second, I touch several times quickly, and then, it becomes freezing, and again, after a couple of seconds later, it starts working again.

How can I prevent this freezing?

Ios Solutions

Solution 1 - Ios

For me, the freezing was repeatable and happened when trying to scroll up or down when already at the top or bottom, respectively. The fix was to add some listeners for touchstart and touchmove and detect these cases and event.preventDefault() on ’em.

Something like the following, where .scroller is the div that will actually scroll (changes to scrollTop).

var lastY = 0;
var targetElt = document.querySelector(".scroller");

targetElt.addEventListener('touchstart', function(event) {
    lastY = event.touches[0].clientY;
});

targetElt.addEventListener('touchmove', function(event) {
    var top = event.touches[0].clientY;

    var scrollTop = event.currentTarget.scrollTop;
    var maxScrollTop = event.currentTarget.scrollHeight -
        $(event.currentTarget).outerHeight();
    var direction = lastY - top < 0 ? 'up' : 'down';

    if (
        event.cancelable && (
            (scrollTop <= 0 && direction === 'up') ||
            (scrollTop >= maxScrollTop && direction === 'down')
        )
    )
      event.preventDefault();

    lastY = top;
});

I hope this helps the next poor soul that encounters this horrible bug! Good luck and keep fighting!

Solution 2 - Ios

Try using overflow: hidden on body. This should resolve the issue: https://codepen.io/cppleon/pen/vYOgKzX

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <div id="scrollable-content">
      <div class="site-header"></div>
      <div class="main-content"></div>
    </div>
  </body>
</html>

CSS

body {
  /* magic is here */
  overflow: hidden;
}

#scrollable-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: gray;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.site-header {
  width: 100%;
  height: 120px;
  background-color: orange;
}

.main-content {
  height: 200%;
}

Solution 3 - Ios

Stable solution

After many days to try to fix it, i saw that the problem comes from fixed body element, maybe because you don't want your users to see your page body bounce when the scroll is blocked: cf this example. When the body is fixed and you're experiencing scrolling freeze bug, if you inspect the body with Desktop Safari on you iOS device, you can see it's kind of "artificially" moving... yes webkit stuff...

I tried all solutions listed on this threat but also on github similar issues. No one was working.

The only stable fix for me is to use this package : body-scroll-lock and remove the fixed on your body element. Right now you can both enjoy fixed body and no scrolling freezing bugs.

Hope it will help people who are currently creating progressive web apps on IOS.

Solution 4 - Ios

I used the below code I think is working.

var scrollTimer;
$('.scroller').on('scroll',function(e){
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        this.scrollTop = Math.max(1, Math.min(this.scrollTop, this.scrollHeight - this.clientHeight - 1));
      }, 300);
});

Solution 5 - Ios

I got the same problem. But that solved easily. This is what i have done: deleted height property of div that was scroll-able. Maybe you are not in the same situation as me and this will not work for you.

Solution 6 - Ios

I know this is very old, but maybe somebody else has the same problem. For me the issue was caused by iNoBounce (https://github.com/lazd/iNoBounce). Y scrolling was fine but X scrolling was causing a lot of issues, the element would get stuck and you'd have to touch and move many times until it finally scrolled.

After removing iNoBounce there were no issues anymore besides the obvious scroll-bounce (and specially the "overscrolling") that was iNoBounce removed. To disable the overscrolling I used the following, however the scroll-bounce is now there.

html { height: 100%; position: fixed; overflow: hidden; }
body { height: 100%; position: relative; overflow: auto; }

Solution 7 - Ios

I ran into this bug recently, and after trying a lot of hacky solutions the one that worked best for us was simply scrolling the view by a pixel if its at the bottom. This prevents the "freeze", which I think is actually the body/window receiving the scroll event if the nested container is fully scrolled down. This is using React but you get the idea.

const listener = () => {
    window.requestAnimationFrame(() => {
      if (!this.scrollRef.current) {
         return;
      }
   
      const { scrollTop, scrollHeight, clientHeight } = this.scrollRef.current;

      if (scrollTop === scrollHeight - clientHeight) {
          // at the bottom
          this.scrollRef.current.scrollTo(0, scrollHeight - clientHeight - 1);
      }
    });
}

this.scrollRef.current.addEventListener("scroll", listener);

Content Type	Original Author	Original Content on Stackoverflow
Question	Adem	View Question on Stackoverflow
Solution 1 - Ios	Wesley Reitzfeld	View Answer on Stackoverflow
Solution 2 - Ios	Aslan Gurbanov	View Answer on Stackoverflow
Solution 3 - Ios	Aarbel	View Answer on Stackoverflow
Solution 4 - Ios	Kenneth Chan	View Answer on Stackoverflow
Solution 5 - Ios	Md. Hasan Mahmud	View Answer on Stackoverflow
Solution 6 - Ios	ubik	View Answer on Stackoverflow
Solution 7 - Ios	Pete Lada	View Answer on Stackoverflow