手机端/pc端 弹出后，禁止底部页面滚动方法

1、单纯的给body和html调用以下样式会导致页面底部每次都滚动到最顶部。

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

2、如果是两个按钮分别控制打开弹出和关闭弹出，应该如下写法：获取到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%;}

3、如果是使用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属性确保屏幕显示滚动条的当前位置
        }
    });
}