移动端浏览器和微信浏览器上禁止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去控制。

上一篇:用NPOI操作EXCEL--巧妙使用Excel Chart


下一篇:Sublime中开发Ruby