javascript - 如何修复 div 滚动以使其更平滑？

Question

所以我开始在手机上遇到问题，我在主页上有一个 div，每当我在那个 div 上滚动时，我也会滚动整个页面。我从 this 找到了解决此问题的方法贴文如下:

var $layer = $("#layer");
$layer.bind('touchstart', function (ev) {
  var $this = $(this);
  var layer = $layer.get(0);

  if ($this.scrollTop() === 0) $this.scrollTop(1);
    var scrollTop = layer.scrollTop;
    var scrollHeight = layer.scrollHeight;
    var offsetHeight = layer.offsetHeight;
    var contentHeight = scrollHeight - offsetHeight;
    if (contentHeight == scrollTop) $this.scrollTop(scrollTop-1);
});

这解决了我的问题，但也带来了另一个问题。此修复使滚动看起来不那么无缝。通常，当您在页面上滚动时，页面本身有时会根据用户滑动的速度滚动一点点超过页面。关于如何使滚动更平滑的任何想法。

Answer 1

-webkit-overflow-scrolling: touch; 将允许内容在完成滚动手势并将手指从触摸屏上移开后继续滚动一段时间。持续滚动的速度和持续时间与滚动手势的力度成正比。您可以阅读更多here

因此将这行代码添加到 div 的 CSS 中:

-webkit-overflow-scrolling: touch;

这应该能让您更顺畅地滚动。