美文网首页
移动端开启页面滚动和禁止页面滚动@令狐张豪

移动端开启页面滚动和禁止页面滚动@令狐张豪

作者: 令狐张豪 | 来源:发表于2019-12-30 18:43 被阅读0次

移动端开启页面滚动和禁止页面滚动@令狐张豪

在做移动端的时候我们经常要禁止页面的滚动和开启页面的滚动,故学习了下原生js的操作

  1. 先声明一个全局函数
<script type="text/javascript">
    var handler = function (e) {
        e.preventDefault();
    }
</script>
  • 禁止页面滚动
    function hideWbImgViewer() {
        document.body.addEventListener('touchmove', handler, {
            passive: false
        });
    }
  • 开启页面滚动
    function showWbImgViewer() {
        document.body.removeEventListener('touchmove', handler, {
            passive: false
        });
    }

注意点不能直接这么写

document.body.addEventListener("touchmove",function(ev){
            ev.preventDefault();
        },{
            passive: false
        })

添加和移除的函数对象应该是同一个,否则移除不起作用,即listener不能直接用匿名函数


有问题欢迎大家的留言和交流

文章如果对您有帮助的话麻烦您点一点下方的(赞和❤)~~~在此感谢大家的阅读

相关文章

网友评论

      本文标题:移动端开启页面滚动和禁止页面滚动@令狐张豪

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