html5移动端滚动穿透点击穿透⼏种⽅案
滚动穿透
在移动端页⾯上，当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下⾯的内容，这就是臭名昭著的滚动穿透问题
解决⽅法⼀：
css之overflow:hidden
html, body {
overflow: auto;
height: 100%;
}
使⽤这种⽅法时，在与饿了么前端 mint-ui 组件库中的 Infinite scroll 存在冲突，导致在⽆限滚动请求下⼀页数据的时候请求不成功，但是如果你的页⾯上没有分页的，这样还是可以很好的解决滚动穿透问题
解决⽅法⼆：
手机上可以打html与css的apptouchmove + preventDefault
在弹出的提⽰框中阻⽌浏览器的默认⾏为以及冒泡⾏为，在可以滑动的dom元素中取消浏览器的默认⾏为以及冒泡⾏为
let stop = document.querySelector("#cancel");
stop.addEventListener("touchmove", (event) => {
event.preventDefault(); //阻⽌默认⾏为
event.stopPropagation(); //阻⽌冒泡
}, false)
let cancelStop = document.querySelector(".allReason");
cancelStop.addEventListener("touchmove", (event) => {
event.cancelBubble = true; //取消阻⽌冒泡
}, false)
使⽤这种⽅法会有⼀个缺点，那就是滑动其它地⽅，底部页⾯不会滚动，但是在可以滑动的页⾯中，将其滑动到底部或者顶部后继续滑动，底部页⾯任然可以滚动
点击穿透
== click事件在移动端会有200-300ms的延迟，是因为⼿机上双击屏幕，缩放功能的存在。在⼿机上打开页⾯，快速双击时，页⾯会被放⼤。所以当你在点击第⼀次的时候，系统会等200-300毫秒，看你会不会点第⼆次，如果有第⼆次，则会放⼤当前页⾯内容；如果没有点第⼆次，才会执⾏点击事件。==
解决⽅案
只⽤touch-----最简单的解决⽅案，完美解决点击穿透事件。
把页⾯内所有click全部换成touch事件（touchstart、touchend、tap），需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，不⽤a标签其实没什么，移动app开发不⽤考虑SEO，即便⽤了a标签，⼀般也会去掉所有默认样式，不如直接⽤span。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论