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

<!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>

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>

VirtuousIntro

发布了21 篇原创文章 · 获赞 3 · 访问量 5万+

私信关注

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

猜你喜欢