问题:在移动端的开发中我们常常会遇到当内容快滑动到顶部或者底部的时候会把浏览器整体拉动。
问题的原因,当页面内的滚动到达顶端的时候或者我们刚刚进去页面,有时候我们会去滑滚动区域外的元素。这个时候如果快速拉动,就会导致拉动了浏览器。
解决原理: 我们可以每次滑动的时候获取到我们手指放开的时间,当第二次滑动如果时间在300毫秒以下我们就禁止body的默认事件
代码
//禁止滚动浏览器
const prohibitWindow = () => {
var lastTouchEnd = 0;
document.addEventListener('touchend', function(event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 100) {
event.preventDefault();
}
lastTouchEnd = now;
}, false)
}