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

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

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

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

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

这个就是完全的禁止上下滑动，没有滚动条，且在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');//去除禁止滚动的样式
}

 

总结：通过js判断固然是好，但是会造成一些乱七八糟的问题，所以优先还是考虑css去控制。

 

转载于:https://www.cnblogs.com/EasonJim/p/6203296.html