javascript - 更改 scrollTop 不会继续惯性滚动

Question

我有一个包含可滚动内容的 div，在某个 scrollTop 值返回到顶部。

var container = document.getElementById('container');

function scroll_function() {

  var new_position_top = container.scrollTop;

  if (new_position_top > 600) {

    container.scrollTop = 0;

  }

}

container.addEventListener('scroll', scroll_function);

#container {
  width: 300px;
  height: 300px;
  overflow: auto;
  border: 1px solid black;
  -webkit-overflow-scrolling: touch;
}
span {
  width: 100%;
  height: 1200px;
  float: left;
  background: red;
  background: -webkit-linear-gradient(red, yellow);
  background: -o-linear-gradient(red, yellow);
  background: -moz-linear-gradient(red, yellow);
  background: linear-gradient(red, yellow);
}

<div id="container">
  <span></span>
</div>

JSFiddle .

使用 MacBook 触控板我得到不同的行为:Chrome 和 Safari 按照我的预期工作，继续回到顶部后的惯性。Firefox，然而，回到顶部并停止惯性。

使用 iOS Safari 也会出现类似的问题，因为 scrollTop 位置在惯性结束之前不会更新。

是否有更好的方法来处理它或修复桌面 Firefox 和 iOS Safari 行为的方法？

Answer 1

使用库来处理平滑滚动在某些时候会有所帮助。

但是，触控板产生的惯性无法停止，因为它不受浏览器控制。

根据设备类型(鼠标滚轮、触控板)或操作系统(Windows、OSX)和浏览器类型(Chrome、Safari、Firefox)，滚动惯性的处理方式不同。

不幸的是，您无法真正控制来自 javascript 沙箱的惰性。您可以尝试绕过它或创建一个人造触控板，但您不能违背用户触控板。