關於移動端滾動穿透問題的解決

關於移動端滾動穿透問題的解決

移動端滾動穿透問題：在移動端進行fixed彈窗的時候，在彈窗上滑動會導致下層頁面跟着滾動，影響用戶體驗，這種現象稱為‘滾動穿透’。

三種解決辦法中，視需求選擇解決辦法：

方法一：overflow:hidden;

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

html.vox , html.vox body{
　　height:100%;
　　overflow:hidden;
}

當彈出彈窗的時候，為底部頁面HTML添加樣式，取消彈窗的時候刪除樣式

這種方式的缺點就是當彈窗彈出的時候，禁用了HTML和body的滾動條，滾動條列表的滾動位置會丟失，重置到沒有滾動的狀態。需要js重置；（不推薦使用）

 方式二：阻止touchmove默認事件

通過阻止touchmove事件禁用滾動事件

var modal = document.getElementById('modal');
modal.addEventListener('touchmove',function(e){
        e.preventDefault();
},false);

缺點：彈窗里滾動事件也會失效，所以如果彈窗內容不會出現滾動時可以使用

方式三：position：fixed

 var ModalHelper = (function(bodyCls){
        var scrollTop;
        return{
            afterOpen:function(){
                scrollTop = document.scrollingElement.scrollTop;n
                document.body.classList.add(bodyCls);
                document.body.style.top = -scrollTop+'px';
            },
            beforeClose:function(){
                document.body.classList.remove(bodyCls); 
                document.scrollingElement.scrollTop = scrollTop;
            }
        }
    })('modal-open');
 function openModal(){
        ModalHelper.afterOpen();
    }
    function closeModal(){
        ModalHelper.beforeClose();
    }

這種方式能夠完美避免上兩種方法的弊端，推薦使用。