美文网首页
移动端浏览器和微信浏览器上禁止body的滚动条

移动端浏览器和微信浏览器上禁止body的滚动条

作者: 唐僧洗头用飘柔_ | 来源:发表于2019-03-12 17:10 被阅读0次

    一般禁止body滚动的做法就是设置overflow:hidden。

    但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改成标签的定位,如body{overflow:hidden;},这个实现是可以的,没有滚动条。

    再进一步分析,如果要用class去实现没有滚动条,如下代码设置:

    .index_body {
        position: fixed;
        height: 100%;
        overflow-y: hidden;  /*为了兼容普通PC的浏览器*/
    }
    

    这个就是完全的禁止上下滑动,没有滚动条,且在iOS的safari浏览器上完全不能上下滚,但是却发现微信浏览器上可以上下缩动(下面再解决)。


    我最后发现,上面这种解决是普遍的浏览器做法,如果要更彻底一点,就直接使用js代码去控制touchmove的事件,直接精致,这个在微信和手机浏览器上完成可行。

    代码如下:

    /*去掉手机滑动默认行为*/
    $('body').on('touchmove', function (event) {
        event.preventDefault();
    });
    

    我还收集了一些设置隐藏滚动条的方法:

    1、body加position:fixed;width:100%;height:100%
    
    2、给要滚动的元素添加一个父级,设定高度,overflow:auto
    
    3、html,body{height:100%;overflow:hidden}
    

    参考:http://www.cnblogs.com/lbcheng/p/6044303.html

    经过上面的设置,如果用户在微信浏览器上不能滚动,但是跳出到了iOS的safari浏览器之后,会有很多变数,比如高度不够,这时滚动也会好一些,那么我这样设置:

    • 1、如果在微信上,默认禁止滚动,并且连默认的上下缩滑都不能。
    • 2、当跳出到手机浏览器上完全可以滑动。

    上面的思路实现:

    1、通过微信useragent来判断,如果是微信浏览器自动加入class去设置。
    2、非微信useragent就默认不加class。

    具体实现:

    微信上,禁止上下缩滑:
    /*去掉手机滑动默认行为*/
    $('body').on('touchmove', function (event) {
       event.preventDefault();
    });
    
    判断微信浏览器:
    /*微信浏览器特殊处理*/
    if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
        $('body').addClass('index_body'); //添加禁止滚动的样式
    }else{
        $('body').removeClass('index_body'); //去除禁止滚动的样式}
    },
    

    相关文章

      网友评论

          本文标题:移动端浏览器和微信浏览器上禁止body的滚动条

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