Question

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

#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>

{{1}}

re-exports

使用MacBook触控板我会遇到不同的行为： Chrome和Safari正如我所期望的那样工作，在回到顶部后继续惯性。然而， Firefox 会回到顶端并停止惯性。

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

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

Answer 1

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

javascript scroll event for iPhone/iPad?

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

我过去的经验是使用名为iScroll的库，然后您可以应用其功能scrollTo

Answer 2

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

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

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

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

Answer 3

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

更改scrollTop不会继续惯性滚动

3 个答案: