Div scrolling freezes sometimes if I use -webkit-o

问题:

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?

回答1:

This is an open issue whose link can be found here issue in ios

One of the Solutions to this problem can be found here in this GitHub link github

According to the issues found in the GitHub links posted above - Few steps can be traced to remove the scrolling issue.

• Comment out the following two lines in the ionic.js

  self.el.style.overflowY = 'hidden';
  
  self.el.style.overflowX = 'hidden';
  

• Use cordova.plugins.Keyboard.disableScroll(true) for scrolling through the keyboard without interruptions

• $ionicConfigProvider.scrolling.jsScrolling(true) Set this to true in the config part.

• Also Under some circumstances, overflow-scroll is set to "hidden" but not set back to "scroll" anymore which makes the screen freeze.

Hope it may help you.

/* Necessary measures for me,this excludes the answer */

/* I hereby state full attribution to be given to the github posted pages stated in the link as above*/

回答2:

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; // Needed in order to determine direction of scroll.
$(".scroller").on('touchstart', function(event) {
    lastY = event.touches[0].clientY;
});

$('.scroller').on('touchmove', function(event) {
    var top = event.touches[0].clientY;

    // Determine scroll position and direction.
    var scrollTop = $(event.currentTarget).scrollTop();
    var direction = (lastY - top) < 0 ? "up" : "down";

    // FIX IT!
    if (scrollTop == 0 && direction == "up") {
      // Prevent scrolling up when already at top as this introduces a freeze.
      event.preventDefault();
    } else if (scrollTop >= (event.currentTarget.scrollHeight - event.currentTarget.outerHeight()) && direction == "down") {
      // Prevent scrolling down when already at bottom as this also introduces a freeze.
      event.preventDefault();
    }

    lastY = top;
});

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

回答3:

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);
});

回答4:

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.