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

Question

是否可以在 javascript 中强制停止 iphone/ipad 上的动量滚动？

额外：很确定这是天上掉下来的馅饼，但是对于奖励点（荣誉和荣誉），在 dom-manipulation 和 scrollTo 应用之后，在强制停止之前以相同的动量恢复滚动。如何？

Answer 1

这在使用fastclick.js时实际上是很有可能的。该库消除了移动设备上 300 毫秒的点击延迟，并在惯性/动量滚动期间启用了事件捕获。

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

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

诀窍是设置overflow: hidden，它会停止惯性/动量滚动。请参阅我的小提琴，了解在惯性/动量期间停止滚动的完整实现。

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属性来取消 BODY 动量滚动的方法。看起来像这样：

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

在 iOS 13 上测试

UPD：上述解决方案在 iOS 12 上失败，因为在此版本中实际滚动元素不是“html”。

以下代码适用于 12 和 13：

window.addEventListener( 'touchend', function( e ){
    window.scroll( 0, window.scrollY );
});