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

 点击穿透：

　　一般都是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>