移動端瀏覽器和微信瀏覽器上禁止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去控制。