移动端弹窗禁止页面滚动

我们要阻止页面滚动,那么何不将其固定在视窗(即position: fixed),这样它就无法滚动了,当蒙层关闭时再释放。
position: fixed应该不用对大家过多介绍了吧,
当然还有一些细节要考虑,将页面固定视窗后,内容会回头最顶端,这里我们需要记录一下,同步top值。

let bodyEl = document.body
let laytop = 0
function stopBodyScroll (isFixed) {
     if (isFixed) {
         laytop = window.scrollY

         bodyEl.style.position = 'fixed'
         bodyEl.style.top = -laytop + 'px'
     } else {
         bodyEl.style.position = '';
         bodyEl.style.top = '';
         window.scrollTo(0, laytop ); // 回到原先的top
     }
}

猜你喜欢

转载自blog.csdn.net/sinat_38592878/article/details/79866667