禁止弹出框下面的内容滑动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
body.modal-open {
    position: fixed;
    width: 100%;
 }
            
.bigbox {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
       z-index: 11;
 }
  .mask {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .2);
}
            
  .box {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 150px;
      background: #fff;
      overflow: auto;
       -webkit-overflow-scrolling: touch;
 }
            
 ul {
       margin: 0;
       padding: 0;
   }
            
    li {
         line-height: 35px;
    }
            
    .hide {
        display: none;
      }
</style>
</head>
<body>

<button class="btn">确定</button>
 <div class="bigbox hide">
      <div class="mask"></div>
       <ul class="box">
                
       </ul>
 </div>

</body>
<script type="text/javascript">

for(let i = 0; i < 30; i++) {
            $('.btn').after(`<p>卡收到货发卡机是发咖技术大会阿咖技术大会阿克苏简单咖技术大会啊可接受的啊啊是可敬的爱神的箭阿克苏的打卡机爱神的箭卡仕达加快圣诞节</p>`)
            $('ul').append(`<li>爱空间的好加上</li>`)
        }

总结的方法:

方法1:
let mo=function(e){e.preventDefault();};
function change(){
$('.bigbox').removeClass('hide')
document.body.style.overflow='hidden';  
document.addEventListener("touchmove",mo,false);//禁止页面滑动
}
function change1(){
$('.bigbox').addClass('hide')
document.body.style.overflow='visible'; 
document.removeEventListener("touchmove",mo,false);  
}

方法2: 

// 上面的方法只适用于弹框不滚动到底部的时候,如果有滚动到底部和顶部时候,页面还是有些滚动。需要给body添加类名

例如:.model-open{position:fixed;width:100%}

// 开起弹框的时候

$(elment).on('click', funcation(){

$('body').addClass('modal-open');

})

// 关闭弹框

$(elment).on('click', funcation(){

$('body').removeClass('modal-open')

})

方法3:

可以直接利用css解决,在滚动元素上面添加overscroll-behavior: contain这个属性既可以使用,需要看看安卓是否可以,有些安卓不支持

 

 

 

 

记录并还原到点击开始的位置

/**
     * 防止浮层唤起时底部滑动跟随问题
     * @param isFixed
     */
    stopBodyScroll: function (isFixed) {
      let bodyEl = document.getElementById('main')
      if (isFixed) {
        this.saveMainTop = window.scrollY
        bodyEl.style.position = 'fixed'
        bodyEl.style.top = -this.saveMainTop + 'px'
      } else {
        bodyEl.style.position = ''
        bodyEl.style.top = ''
        window.scrollTo(0, this.saveMainTop)
      }
    }

</script>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值