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属性确保屏幕显示滚动条的当前位置 } }); }
  • 相关阅读:
    Dockerfile指令学习 (转)
    手机触屏滑动图片切换插件swiper.js
    基于jquery网站左侧下拉菜单
    支持移动触摸设备的简洁js幻灯片插件
    基于jquery仿天猫分类导航banner切换
    基于jQuery图像碎片切换效果插件FragmentFly
    基于jQuery在线问卷答题系统代码
    基于CSS3自定义发光radiobox单选框
    基于jQuery左右滑动切换图片代码
    基于CSS3和jQuery实现的3D相册
  • 原文地址:https://www.cnblogs.com/pheosia/p/10030810.html
Copyright © 2011-2022 走看看