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

問題描述

最近在做移動項目時遇到一個頁面滾動穿透問題，具體場景是這樣的，在一個可滾動的列表頁中彈出一個蒙層，蒙層中的內容是可滾動的，底部的父頁面理論上是不可滾動的，但是當滑動蒙層內容時，底部父頁面會跟隨滾動，這就是頁面滾動穿透的問題。這個是比較常見的問題，基本都會遇到，Google一下出解決方案也是挺多的。以下列舉一些解決方案：

方案一

在調用彈層的切換底部父頁面的樣式，可以切換HTML標簽設置樣式，禁用父頁面滾動

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

當彈出蒙層的時候，可以添加底部父頁面HTML標簽的class，取消蒙層時則刪除class

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

方案二

更多閱讀

• 移動頁面滾動穿透如何解決移動頁面滾動穿透如何解決
• 移動端滾動穿透問題
• 移動端滾動穿透問題完美解決方案