手機端/pc端 彈出後，禁止底部頁面滾動方法

一、單純的給body和html調用如下樣式會致使頁面底部每次都滾動到最頂部。

.hidden{width:100%; height:100%; overflow:hidden;}

二、若是是兩個按鈕分別控制打開彈出和關閉彈出，應該以下寫法：獲取到scrollTop值，給body設置position爲fixed；並進行top賦值。

　　$(".open-nav").click(function () {
        var scrollTop = $(document).scrollTop();//獲取當前滾動條位置
        $("body").addClass("flexd");//設置絕對定位，此時不操做的話底層頁面回到最初位置
        $("body").css("top",-scrollTop);//設置top屬性確保屏幕顯示滾動條的當前位置

    });

    $(".close-nav").click(function () {
        var scrollTop = -($("body").position().top);//獲取當前滾動條位置
        $("body").removeClass("flexd");
        $("body").css("top",0);   //top設置爲0
        $(document).scrollTop(scrollTop);//設置top屬性確保屏幕顯示滾動條的當前位置

    });

 

.flexd{position: fixed; width: 100%;}

三、若是是使用layer打開彈出，應該以下進行執行。關閉彈出時，恢復body滾動，並讓定位到上述打開時的位置。

function changePro() {
    var scrollTop = $(document).scrollTop();//獲取當前滾動條位置
    $("body").addClass("flexd");//設置絕對定位，此時不操做的話底層頁面回到最初位置
    $("body").css("top",-scrollTop);//設置top屬性確保屏幕顯示滾動條的當前位置

    layer.open({
        type: 1,
        title:'產品列表',
        btn:['保存'],
        area:['90%','auto'],
        content: $('#proListBox'),
        yes: function(index, layero){
            var values = $('#proListBox').serializeJson();
            if (values == ''){
                layer.msg('請選擇產品', {icon: 7});
            }else {
                checkPros=values.ppt;
                $("#productsName").val("產品已選擇")
                layer.close(index)
            }
        },
        end:function(){   //關閉彈出時執行
            $("body").removeClass("flexd");
            $("body").css("top",0);   //top設置爲0
            $(document).scrollTop(scrollTop);//設置top屬性確保屏幕顯示滾動條的當前位置
        }
    });
}