【問題解決】body設置overflow：hidden之后移動端還是可以滑動

在一次H5項目中(hisense)，有一個小功能：頁面中圖片(小圖)點擊后出現浮層（半透明效果），用來展示大圖。這個時候如果滑動頁面的話，浮層底部會進行滑動，效果很不好。

因此，當查看大圖的時候，會阻止頁面滑動效果：

// 查看大圖時禁止滑動
document.body.style.overflow = 'hidden';

// 取消大圖查看時允許滑動
document.body.style.overflow = 'auto';

在電腦上調試效果如設想的一樣，但是用手機，不管是安卓還是ios，都不起作用，點開大圖后底層還是能夠滑動...

網上說這是因為移動端瀏覽器內核阻止了這種效果...一般有如下三種解決方案：

方法一：body上還要添加position：fixed

// 我們用css來分別展示兩種效果 就不用js了 

// 正常狀態下
body {
　　height：100%；
}

// 出現浮層時添加
body.scroll {
  overflow: hidden;
  position: fixed;    
}

// 取消浮層時添加
body {
    overflow: auto;
    position: static;
}

這種方法有一個弊端：

當我們滑動一段距離頁面，然后點擊頁面中的小圖展示浮層大圖時，由於body設置了position: fixed，整個body頁面會瞬間滑到頂部，這樣就導致，當你取消浮層之后，就不知道自己剛剛是滑動到哪了...

 

方法二：給滑動的盒子外面再包裹一個盒子，將其設置overflow：hidden

// 比如我們的主要內容盒子是box 然后在外面添加over盒子

// 正常情況下：
.over {
    height: 100%;
}

// 出現浮層時添加
over {
    overflow: hidden;
}

// 取消浮層時添加
over {
    overflow: auto;
}

這個方法也有弊端：

一是要平白無故添加一層，可能會導致頁面樣式有點變化；二是如果在項目中，我們的內容盒子box並不是覆蓋整個窗口，而是距離頂部有一段距離，並且背景還設有背景圖片，這個時候如果取消圖層（over盒子添加了overflow：auto），然后滑動頁面你會發現，背景圖片沒有動，而是內容盒子box在滑動。當然，如果你正好是需要這種效果，那自然是好的...

 

方法三：取消浮層的滑動事件

var shade = document.getElementByClassName('shade')[0];

shade.ontouchmove = function (event) {
    event.preventDefault();
}

這個方法兼容性強，效果好，弊端就是如果你的浮層自己也有滾動，那這樣設置后會導致浮層自己的滾動事件也沒法觸發....

 

【總結】

上述三種方法各有利弊，根據具體情況選取吧~

 

【參考文章】

移動端設置overflow：hidden后為何還能滾動

web移動端浮層滾動阻止window窗體滾動