Question

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

额外：非常确定这是天空中的馅饼，但是对于奖励点（荣誉和荣誉），在dom-manipulation和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;
});

在iOS 13上测试

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

以下代码适用于12和13：

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

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

3 个答案: