是否可以通过 Javascript 检测某个元素是否已在 Mobile Safari 中停止滚动?
我有一个使用 -webkit-overflow-scrolling:touch
动量滚动的元素,我需要检测该元素是否已停止滚动,包括在动量影响滚动之后。
这可能吗?使用 onscroll
事件在我的应用程序中无法正常工作。
最佳答案
您可以计算滑动速度并尝试根据某个阈值确定是否会发生动量滚动。我做了一些测试,大约 0.25 像素/毫秒似乎是一个不错的值。
注意:有时动量滚动也会在较低的速度下发生。我记录的引起动量滚动的最低速度是 0.13(增量时间非常短),所以如果您需要 100% 完美的解决方案,请继续寻找。
示例代码还检测和处理过度滚动。
使用 JQuery;
var scrollWrapper = $('#myWrapper');
var starTime, startScroll, waitForScrollEvent;
scrollWrapper.bind('touchstart', function() {
waitForScrollEvent = false;
});
scrollWrapper.bind('touchmove', function() {
startTime = new Date().getTime(); startScroll = scrollWrapper.scrollTop();
});
scrollWrapper.bind('touchend', function() {
var deltaTime = new Date().getTime() - startTime;
var deltaScroll = Math.abs(startScroll - scrollWrapper.scrollTop());
if (deltaScroll/deltaTime>0.25
|| scrollWrapper.scrollTop()<0
|| scrollWrapper.scrollTop()>scrollWrapper.height()) {
// will cause momentum scroll, wait for 'scroll' event
waitForScrollEvent = true;
}
else {
onScrollCompleted(); // assume no momentum scroll was initiated
}
startTime = 0;
});
scrollWrapper.bind('scroll', function() {
if (waitForScrollEvent) {
onScrollCompleted();
}
});
关于javascript - 检测元素是否已停止动量滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13812936/