How to disable dropdown to reveal URLs or ads on mobile? This article will tell you the answer.
In general, the solution is basically as follows.
document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, { passive: false })
But this will cause the scroll to fail to scroll. So how to better prohibit pull-downs to reveal URLs or ads on mobile? Here is our solution. Hope it helps you solve your problem.
function stopDown(el) {
let startX, startY;
// el is the outermost div
el.addEventListener("touchstart", (e) => {
startX = e.changedTouches[0].pageX;
startY = e.changedTouches[0].pageY;
})
el.addEventListener("touchmove", (e) => {
// Get X,Y when sliding the screen
let endX = e.changedTouches[0].pageX;
let endY = e.changedTouches[0].pageY;
// Get the sliding distance
let distanceX = endX - startX;
let distanceY = endY - startY;
// Determine the sliding direction
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
// console.log('slide right');
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
// console.log('Slide left');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
// console.log('slide up');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
// The core is here
// path is the collection of all ancestor nodes from the touch point to the outermost layer. If you don't understand it, log it.
let path = e.path
let is_scrollTop = false
// From the touch point to all the ancestor nodes of the outermost layer, if scrollTop is not 0, the drop-down is not prohibited.
for (let dom of path) {
if (dom.scrollTop) {
is_scrollTop = true
}
}
if (!is_scrollTop) {
e.preventDefault()
return false
}
// console.log('slide down');
} else {
// console.log('Click did not slide');
}
})
}