当前位置 : 主页 > 手机开发 > 无线 >

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

来源:互联网 收集:自由互联 发布时间:2021-06-10
点击穿透: 一般都是touch和click混用导致的, touch是立马触发的,touchend还会触发一次click,导致上层元素touchend触发的click会影响到下层元素。 解决办法: 只用touch 或者 只用click ; 使

 点击穿透:

  一般都是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>
网友评论