更改 scrollTop 不会继续惯性滚动答案

【问题标题】：Changing scrollTop does not continue inertia scrolling更改 scrollTop 不会继续惯性滚动
【发布时间】：2016-10-08 20:00:28
【问题描述】：

我有一个带有可滚动内容的 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 也会出现类似的问题，因为滚动顶部位置在惯性结束之前不会更新。

是否有更好的解决方法或修复桌面 Firefox 和 iOS Safari 行为的方法？

【问题讨论】：

提供的小提琴在 Firefox 上运行良好...
使用触控板，在您的 Firefox 中，它会继续使用它在顶部时的惯性（而不是像我一样停下来）？

标签： javascript firefox scroll

【解决方案1】：

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

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

根据设备类型（鼠标滚轮、触控板）或操作系统（Windows、OSX）和浏览器类型（Chrome、Safari、Firefox），滚动的惯性会有所不同。

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

【讨论】：

【解决方案2】：

嗯，这应该是 iOS 的问题。请先查看以下这些资源以获取更多信息。

javascript scroll event for iPhone/iPad?

http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

我过去的经验是使用一个名为iScroll的库，然后你可以应用它的函数scrollTo

【讨论】：

【解决方案3】：

我建议你使用像iScroll这样的外部JS库来处理iOS上的滚动事件

【讨论】：