美文网首页
js开启和禁止页面滑动

js开启和禁止页面滑动

作者: lemon031 | 来源:发表于2019-02-14 10:59 被阅读0次

    在移动端中,由于机型的不同,往往在弹窗的时候会出现页面的穿透事件,使得原页面还是能够进行滑动,这是我们不想看到的效果。

    首先,建立一个函数

    function bodyScroll(event){ 

        event.preventDefault(); 

    }

    之后在触发弹窗的时候禁止页面滚动

    document.body.addEventListener('touchmove',bodyScroll,false); 

    $('body').css({'position':'fixed',"width":"100%"});

    关闭弹框时开启页面滚动

    document.body.removeEventListener('touchmove',bodyScroll,false); 

    $("body").css({"position":"initial","height":"auto"});                               

    注意:切不可以下写法

    document.body.addEventListener('touchmove', function (event) { 

        event.preventDefault(); 

    },false); 

    document.body.removeEventListener('touchmove', function (event) { 

        event.preventDefault(); 

    },false);

    ---------------------

    原文:https://blog.csdn.net/m0_37852904/article/details/79300719

    也可以用下面情况: 1.遮罩层显示时处理 body{overflow:hidden;},一定要在关闭遮罩层时处理掉 body{overflow: initial;} 2.fastclick 库

    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 可对滑动高度进行处理

    相关文章

      网友评论

          本文标题:js开启和禁止页面滑动

          本文链接:https://www.haomeiwen.com/subject/kcgseqtx.html