zoukankan      html  css  js  c++  java
  • 手机端/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属性确保屏幕显示滚动条的当前位置 } }); }
  • 相关阅读:
    TinyEditor:简洁且易用的html所见即所得编辑器
    arguments.callee 调用自身
    java.io.IOException: 设备未就绪
    关于vcastr3播放器自动播放的问题
    javascript中IE浏览器不支持NEW DATE()带参数的解决方法
    Oracle常用查看表结构命令
    java通过文件头内容判断文件类型
    RS开发日期提示控件默认为昨天
    Cognos更新问题之利用Transform实现Cube增量更新
    SqlServer中从字符串中获取项目指标方法charindex月substring结合
  • 原文地址:https://www.cnblogs.com/pheosia/p/10030810.html
Copyright © 2011-2022 走看看