更改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

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

iPhone/iPad 的 JavaScript 滚动事件？

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

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