无需滚动即可检测滑动方向
提问于 2019-01-26 15:20:28
如何在不实际滚动的情况下检测滑动方向？这就是我要做的：
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
window.ontouchmove = preventDefault;
window.addEventListener('touchmove', function(e) {
if (e.deltaY < 0) {
console.log('scrolling up');
document.getElementById('status').innerHTML = 'scrolling up';
}
if (e.deltaY > 0) {
console.log('scrolling down');
document.getElementById('status').innerHTML = 'scrolling down';
}
});<div style='height: 2000px; border: 5px solid gray; touch-action: none;'>
<p id='status'></p>
</div>
我观察到的是，尽管屏幕没有滚动，但没有执行任何事件侦听器代码。这是因为事件中没有'deltaY‘属性。我使用了桌面上的equivalent code和‘scroll’事件来检测滚动方向，而不是滚动。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-29 17:53:35
下面是我所做的：
let start = null;
window.addEventListener('touchstart', function(e) {
start = e.changedTouches[0];
});
window.addEventListener('touchend', function(e) {
let end = e.changedTouches[0];
if(end.screenY - start.screenY > 0)
{
console.log('scrolling up');
document.getElementById('status').innerHTML = 'scrolling up';
}
else if(end.screenY - start.screenY < 0)
{
console.log('scrolling down');
document.getElementById('status').innerHTML = 'scrolling down';
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54379721
复制相关文章
腾讯云开发者
