本文介绍在移动端Web开发中，如何通过JavaScript阻止用户下拉页面露出网址或广告。针对常见的preventDefault导致滚动失效问题，提供基于touchstart和touchmove事件计算的解决方案，确保在安卓微信、UC及小米浏览器中测试有效。
需求
在移动端网页开发中，需要实现禁止用户下拉页面从而露出浏览器地址栏或广告的功能。
查找解决方案
常见的解决思路大多采用监听touchmove事件并调用preventDefault的方法。
document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, { passive: false })
这种方法存在一个明显缺陷，即会导致页面无法正常滚动。
我的解决方案
function stopDown(el) {
let startX, startY;
// el是最外层div
el.addEventListener("touchstart", (e) => {
startX = e.changedTouches[0].pageX;
startY = e.changedTouches[0].pageY;
})
el.addEventListener("touchmove", (e) => {
//获取滑动屏幕时的X,Y
let endX = e.changedTouches[0].pageX;
let endY = e.changedTouches[0].pageY;
//获取滑动距离
let distanceX = endX - startX;
let distanceY = endY - startY;
//判断滑动方向
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
// console.log('往右滑动');
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
// console.log('往左滑动');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
// console.log('往上滑动');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
// 核心在这
// path 是从触摸点到最外层所有祖先节点的集合,不了解就log看下
let path = e.path
let is_scrollTop = false
// 从触摸点到最外层所有祖先节点 scrollTop不为0就不禁止下拉 为0 就禁止下拉
for (let dom of path) {
if (dom.scrollTop) {
is_scrollTop = true
}
}
if (!is_scrollTop) {
e.preventDefault()
return false
}
// console.log('往下滑动');
} else {
// console.log('点击未滑动');
}
})
}
目前经过自测，该方案在安卓微信内置浏览器、UC浏览器以及小米浏览器中效果良好。更多关于移动端禁止下拉广告网址的相关技巧请关注本站其它相关文章！