以编程方式停止-webkit-overflow-scrolling

我有一个PhoneGap应用程序，使用iOS本地滚动通过-webkit-overflow-scrolling的div。 我希望能够在用户点击一个button（滚动回页面顶部）时手动停止正在进行的滚动。 这是可行的吗？

Answer 1

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

包括fastclick并将其附加到body元素后，我的代码停止滚动，并转到顶部看起来像这样：

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

诀窍是设置overflow: hidden ，这将停止惯性/动量滚动。 请看我的小提琴全面实施在惯性/势头停止滚动 。

Answer 2

不幸的是，目前这是不可能的。 scroll事件仅在滚动结束时触发。 只要动力不断移动，内容就不会被激发。 您可以在Apple的“ Safari Web Content Guide ”中查看图6-1中的平移手势 。

我也创build了一个演示这种行为的小提琴 。 在 iOS完成animation之后 ， scrollTop值被设置。

Answer 3

您可以使用'touchstart'而不是'click'来捕捉触摸事件，因为在动量滚动完成之前，点击事件似乎不会被触发。 试试这个jQuery解决scheme：

 $('#yourTrigger').on('touchstart', function () { var $div = $('.yourScrollableDiv'); if ($div.scrollTop() === 0) { return false; //if no scroll needed, do nothing. } $div.addClass('scrolling'); //apply the overflow:hidden style with a class $div.animate({ scrollTop: 0 }, 600, function () { $div.removeClass('scrolling'); //scrolling has finished, remove overflow:hidden }); } 

“滚动”类只有CSS属性，overflow：hidden，就像@ Patrick-Rudolph所说的那样，将停止正在滚动的任何dynamic。

 .scrolling { overflow: hidden; } 

注意：最好使用callback函数来告诉滚动animation何时完成，而不是设置定时器function。