在javascript中的iphone / ipad上强制停止动量滚动

Question

是否有可能在JavaScript中的iPhone / iPad上强制停止动量滚动？

[额外：可以肯定，这是天空中的馅饼，但是对于加分（荣誉和荣誉），在进行dom操作和scrollTo之后，在强制停止之前以相同的动量恢复滚动。怎么做？

Answer 1

使用fastclick.js时，这实际上是很有可能的。 lib消除了移动设备上300ms的单击延迟，并启用了惯性/动量滚动过程中的事件捕获。

包括fastclick并将其附加到body元素之后，我停止滚动并转到顶部的代码如下：

scrollElement.style.overflow = 'hidden';
scrollElement.scrollTop = 0;
setTimeout(function() {
  scrollElement.style.overflow = '';
}, 10);

技巧是设置overflow: hidden，这将停止惯性/动量滚动。请参阅我的提琴，以获取stop scrolling during inertia/momentum的完整实现。

Answer 2

这是我的使用jQuery动画的代码（作为onclick事件运行）

var obj=$('html, body'); // your element

if(!obj.is(':animated')) {

    obj.css('overflow', 'hidden').animate({ scrollTop: 0 }, function(){ obj.css('overflow', ''); });

}

在iPhone 6上测试

Answer 3

我已经找到一种通过在touchend事件上分配html.scrollTop属性来取消身体动量滚动的方法。看起来像这样：

let html = document.querySelector('html');
window.addEventListener( 'touchend', function( e ){
    html.scrollTop = html.scrollTop;
});