移動端頁面滾動穿透問題解決方案

時間 2019-11-29

標籤移動頁面滾動穿透問題解決方案欄目無線简体版

原文原文鏈接

問題描述

最近在作移動項目時遇到一個頁面滾動穿透問題，具體場景是這樣的，在一個可滾動的列表頁中打開彈窗，底部的頁面理論上是不可滾動的，可是當滑動彈窗時，底部頁面會跟隨滾動，這就是所謂的頁面滾動穿透的問題。這個是比較常見的問題，基本都會遇到，Google一下出解決方案也是挺多的。如下根據不一樣的適用場景總結一些解決方案：javascript

方案一：overflow:hidden

在列表容器的父元素上設置樣式overflow:hidden來禁用滾動css

.alpha {
     height: 100%;
     overflow: hidden;
    }
    .alpha body {
     height: 100%;
     overflow: hidden;
    }

當彈出蒙層的時候，能夠添加底部頁面HTML標籤的class，取消蒙層時則刪除classhtml

$('html').addClass('alpha');
    $('html').removeClass('alpha');

缺點：

當彈出蒙層時，禁用了html和body的滾動條，滾動列表的滾動位置會丟失，會重置到沒有滾動的狀態，須要js進行還原。java

手機掃碼查看效果：
查看DEMOgit

一、未滾動時彈出蒙層，底部列表會被禁用滾動

二、滾動後再彈出蒙層，滾動位置會丟失，重置到無滾動的位置

方案二：阻止touchmove默認事件

經過阻止彈窗的touchmove默認事件禁用滾動實現
代碼實現：github

var modal = document.getElementById('modal'); // 彈窗dom對象
    modal.addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, false);

缺點

彈窗中裏不能有其它須要滾動的內容，如大段文字須要固定高度，顯示滾動條也會被阻止。web

手機掃碼查看效果：
查看DEMO
bootstrap

方案三：position: fixed

設置列表容器元素爲positon:fixed
代碼實現:segmentfault

.alpha.body{
        position:fixed;
        width:100%;
    }

缺點：

這種方法一樣有以上兩種方法的缺點，滾動列表的滾動位置會丟失，會重置到沒有滾動的狀態，經過js獲取滾動條位置，調整位置便可。dom

打開彈窗時則在body元素上添加class
手機掃碼查看效果：
查看DEMO