一般禁止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去控制。