如果我使用 -webkit-overflow-scrolling，Div 滚动有时会冻结

Question

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

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

首先，如果我等待一段时间，例如 20 秒，然后触摸 div，它没有响应。我等了几秒钟，它又开始工作了。

其次，我快速触摸了几次，然后，它变得僵硬，几秒钟后，它又开始工作了。

我怎样才能防止这种冻结？

原文由 Adem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我最近遇到了这个错误，在尝试了很多骇人听闻的解决方案之后，最适合我们的解决方案就是简单地将视图滚动一个像素（如果它位于底部）。这可以防止“冻结”，如果嵌套容器完全向下滚动，我认为这实际上是接收滚动事件的主体/窗口。这是使用 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);

原文由 Pete Lada 发布，翻译遵循 CC BY-SA 4.0 许可协议