移动端 点击滚动穿透的解决方案

 点击穿透：

　　通常都是touch和click混用致使的，  touch是立马触发的，touchend还会触发一次click，致使上层元素touchend触发的click会影响到下层元素。  

　　解决办法：   只用touch 或者 只用click ；    使用fastclick 等一些自定义tap事件， 移除touchend以后触发的那次click事件。

 

滚动穿透：

　　在打开的弹窗或者遮罩层上滚动， 会影响到下层的body元素的滚动。 体验很很差。

　　解决办法， 在打开弹框或遮罩层的时候，获取html的scrollTop， 给body改成fixed定位， top值为负的scrollTop值。 关闭弹框的时候，把fixed定位去掉。还原scrollTop值。

 

　　　

<style> .stopBodyScroll { position:fixed; bottom: 0; left: 0; right: 0;
     }
</style>


<script>

    function stopBodyScroll() { var scrollTop = document.documentElement.scrollTop; document.body.classList.add('stopBodyScroll'); document.body.style.top = `-${scrollTop}px`; } function openBodyScroll() { var top = document.body.style.top; document.body.style.top = 'auto'; document.body.classList.remove('bodyFixed'); document.documentElement.scrollTop = Math.abs(parseInt(top)); } </script>