Question

如果我使用-webkit-overflow-scrolling作为滚动div，它会以原生动量完美滚动。但是，div本身有时会冻结并且不会响应我的手指动作。 2-3秒后，它再次变为可滚动。

我不知道我是如何重现这个问题的。但是，正如我所看到的，有两种主要行为会造成这种情况。

首先，如果我等待一段时间，例如20秒，然后触摸div，它就不会响应。我等了几秒钟，它又恢复了工作。

其次，我快速触摸几次，然后，它变得冰冷，再过几秒钟后，它再次开始工作。

如何防止这种冻结？

Answer 1

对我来说，冻结是可重复的，并且在试图分别向上或向下滚动时已经发生在顶部或底部。解决方法是为touchstart和touchmove添加一些侦听器，并检测这些情况和event.preventDefault()在’em上。

类似于以下内容，其中.scroller是实际滚动的div（更改为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;
});

我希望这能帮助遇到这个可怕虫子的下一个可怜的灵魂！祝你好运，继续战斗！

Answer 2

尝试在身体上使用overflow: hidden。这样可以解决问题：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%;
}

Answer 3

我使用了以下我认为正常的代码。

listo = []
name = input("Name: ")
#listo.append(name) move to while loop
while name: 
  listo.append(name) #order changed, while loop runs while there is still a name to add. The empty name will terminate the while loop, hence never reaching the appen line
  name = input("Name: ") 
listo.sort()
listo.reverse()
for name in listo:
  print(name)

Answer 4

稳定的解决方案

经过几天的修复，我发现问题来自固定的body元素，可能是因为您不希望用户看到页面正文在弹跳时反弹滚动被阻止：cf this example。当主体固定并且遇到滚动冻结错误时，如果在iOS设备上使用Desktop Safari检查主体，您会发现它有点“人为”移动...是Webkit的东西...

我尝试了针对该威胁以及github类似问题列出的所有解决方案。没有人在工作。

对我来说唯一稳定的解决方法是使用此程序包：body-scroll-lock并删除fixed元素上的body 。现在，您既可以享受固定的机身，又可以享受无滚动的冰冻虫子。

希望它可以帮助当前在IOS上创建渐进式Web应用程序的人。

Answer 5

我遇到了同样的问题。但这很容易解决。这就是我所做的：删除了可滚动的div的height属性。也许您与我的处境不同，这对您不起作用。

Answer 6

我知道这已经很老了，但也许其他人也有同样的问题。对我来说，问题是由 iNoBounce (https://github.com/lazd/iNoBounce) 引起的。 Y 滚动很好，但 X 滚动会导致很多问题，元素会卡住，您必须多次触摸和移动，直到它最终滚动。

删除 iNoBounce 后，除了明显的滚动反弹（特别是“过度滚动”）之外，iNoBounce 不再有任何问题。为了禁用过度滚动，我使用了以下内容，但是滚动反弹现在在那里。

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

Answer 7

我最近遇到了这个错误，在尝试了很多 hacky 解决方案之后，最适合我们的解决方案只是将视图滚动一个像素（如果它位于底部）。这可以防止“冻结”，如果嵌套容器完全向下滚动，我认为这实际上是接收滚动事件的主体/窗口。这是使用 React 但你明白了。

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

如果我使用-webkit-overflow-scrolling

7 个答案: