logo标签列表

更改scrollTop不会继续惯性滚动。

javascriptfirefoxscroll
5
我有一个带有可滚动内容的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 行为的方法吗？

2
提供的 fiddle 在 Firefox 上运行良好... - himeshc_IB
在使用触摸板时，您的Firefox是否会继续保持惯性并滚动到顶部（而不是像我一样突然停止）？ - Alvaro
3个回答
2
使用库来处理平滑滚动在某些情况下会有所帮助。
然而，由触控板引起的惯性不能被停止，因为它不受浏览器控制。
根据设备类型（鼠标滚轮、触控板）或操作系统（Windows、OSX）和浏览器类型（Chrome、Safari、Firefox），滚动的惯性将被不同地处理。
不幸的是，你无法真正控制javascript沙盒中的惯性。你可以尝试规避它或创建一个人工的惯性，但你无法反对用户的触控板。
1
1

我建议你使用外部JS库，比如iScroll来处理iOS上的滚动事件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接