禁止弹窗中蒙层底部页面跟随滚动的几种方法(3)

问题虽然是解决了，但是回头来看，复杂程度和代码量明显增加了一个梯度。

本着简单方便的原则，我们是不是还可以探索其他的方案呢？

既然touch事件判定比较复杂，何不跳出这个框框，另辟蹊径，探索更加合适的方案。

于是，便有了我们的方案三。

方案三

来讲讲我的思路，既然我们要阻止页面滚动，那么何不将其固定在视窗（即position: fixed），这样它就无法滚动了，当蒙层关闭时再释放。

position: fixed应该不用对大家过多介绍了吧，详细的介绍大家可以参考这篇文章：//www.jb51.net/article/83175.htm

当然还有一些细节要考虑，将页面固定视窗后，内容会回头最顶端，这里我们需要记录一下，同步top值。

示例代码：

let bodyEl = document.body
let top = 0

function stopBodyScroll (isFixed) {
 if (isFixed) {
 top = window.scrollY

 bodyEl.style.position = 'fixed'
 bodyEl.style.top = -top + 'px'
 } else {
 bodyEl.style.position = ''
 bodyEl.style.top = ''

 window.scrollTo(0, top) // 回到原先的top
 }
}

思考总结

• 若应用场景是pc，推荐方案一，真的是不要太方便
• 若应用场景是h5，你可以采用方案二，但是我建议你采用方案三
• 若应用场景是全平台，那么方案三你不容错过

本文到这里也即将结束了，在这里我强烈推荐一下方案三，原因在于简单、方便、兼容性好，一次封装，永久受用。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对黑区网络的支持。