蒙层禁止页面滚动的方案

蒙层禁止页面滚动的方案

弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我们是不希望他进行滚动的,因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动,也可以称为滚动穿透的问题,文中介绍了一些常用的解决方案。

实现#

首先需要实现一个蒙层下滚动的效果示例,当我们点击弹窗按钮显示蒙层之后,再滚动鼠标的话能够看到蒙层下的页面依旧是能够滚动的。如果在蒙层的内部进行滚动,当蒙层内滚动条滚动到底部的时候再继续滚动的话,蒙层下的页面也是能够滚动的,这样的交互就比较混乱,文中内容的测试环境是Chrome 96.0.4664.110

Copy
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>蒙层禁止页面滚动的方案</title> <style type="text/css"> #mask{ position: fixed; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .hide{ display: none !important; } .long-content > div{ height: 300px; } .mask-content{ width: 300px; height: 100px; overflow-x: auto; background: #fff; } .mask-content > div{ height: 300px; } </style> </head> <body> <button id="btn">弹窗</button> <div class="long-content"> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> </div> <div id="mask" class="hide"> <div class="mask-content"> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> </div> </div> </body> <script type="text/javascript"> (() => { const btn = document.getElementById("btn"); const mask = document.getElementById("mask"); btn.addEventListener("click", e => { mask.classList.remove("hide"); }) mask.addEventListener("click", e => { mask.classList.add("hide"); }) })(); </script> </html>

body hidden#

此方案是一种比较常用的方案,即打开蒙层时给body添加overflow: hidden;,在关闭蒙层时就移除这个样式,例如思否的登录弹窗、antdModal对话框就是这样的方式。 这种方案的优点是简单方便,只需添加css样式,没有复杂的逻辑。缺点是在移动端的适配性差一些,部分安卓机型以及safari中,无法阻止底部页面滚动,另外有些机型可能需要给根节点<html>添加overflow: hidden;样式才有效果,此外由于实际上是将页面的内容给裁剪了,所以在设置这个样式的时候滚动条会消失,而移除样式的时候滚动条又会出现,所以在视觉上是会有一定的闪烁现象的,当然也可以定制滚动条的样式,但滚动条样式就是另一个兼容性的问题了,还有同样是因为裁剪。

Copy
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>蒙层禁止页面滚动的方案</title> <style type="text/css"> #mask{ position: fixed; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .hide{ display: none !important; } .long-content > div{ height: 300px; } .body-overflow-hidden{ overflow: hidden; } .mask-content{ width: 300px; height: 100px; overflow-x: auto; background: #fff; } .mask-content > div{ height: 300px; } </style> </head> <body> <button id="btn">弹窗</button> <div class="long-content"> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> </div> <div id="mask" class="hide"> <div class="mask-content"> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> </div> </div> </body> <script type="text/javascript"> (() => { const btn = document.getElementById("btn"); const mask = document.getElementById("mask"); const body = document.body; btn.addEventListener("click", e => { mask.classList.remove("hide"); body.classList.add("body-overflow-hidden"); }) mask.addEventListener("click", e => { mask.classList.add("hide"); body.classList.remove("body-overflow-hidden"); }) })(); </script> </html>

touch preventDefault#

上边的方案对于移动端的效果不是很理想,如果需要在移动端进行处理的话,可以利用移动端的touch事件,来阻止默认行为,当然这是适用于移动端的方式,另外要是把手机通过蓝牙也好转接线也好接上鼠标的话,那就是另一回事了。假如蒙层内容不会有滚动条,那么上述方法是没有问题的,但是假如蒙层内容有滚动条的话,那么它再也无法动弹了。所以如果在蒙层内部有元素需要滚动的话,需要用Js控制其逻辑,但是逻辑控制起来又是比较复杂的,我们可以判断事件的event.target元素,如果touch的目标是弹窗不可滚动区域即背景蒙层就禁掉默认事件,反之就不做控制,之后又出现了问题,需要判断滚动到顶部和滚动到底部的时候禁止滚动,否则触碰到上下两端,弹窗可滚动区域的滚动条到了顶部或者底部,依旧穿透到body,使得body跟随弹窗滚动,这样的话逻辑的复杂程度就比较高了。

Copy
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>蒙层禁止页面滚动的方案</title> <style type="text/css"> #mask{ position: fixed; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .hide{ display: none !important; } .long-content > div{ height: 300px; } .mask-content{ width: 300px; height: 100px; overflow-x: auto; background: #fff; } .mask-content > div{ height: 300px; } </style> </head> <body> <button id="btn">弹窗</button> <div class="long-content"> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> </div> <div id="mask" class="hide"> <div class="mask-content"> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> </div> </div> </body> <script type="text/javascript"> (() => { const btn = document.getElementById("btn"); const mask = document.getElementById("mask"); const body = document.body; const scrollerContainer = document.querySelector(".mask-content"); let targetY = 0; // 记录下第一次按下时的`clientY` scrollerContainer.addEventListener("touchstart", e => { targetY = Math.floor(e.targetTouches[0].clientY); }); const touchMoveEventHandler = e => { if(!scrollerContainer.contains(e.target)) { e.preventDefault(); } let newTargetY = Math.floor(e.targetTouches[0].clientY); //本次移动时鼠标的位置,用于计算 let scrollTop = scrollerContainer.scrollTop; // 当前滚动的距离 let scrollHeight = scrollerContainer.scrollHeight; // 可滚动区域的高度 let containerHeight = scrollerContainer.clientHeight; //可视区域的高度 if (scrollTop <= 0 && newTargetY - targetY > 0) { // 到顶 console.log("到顶"); if(e.cancelable) e.preventDefault(); // 必须判断`cancelable` 否则容易出现滚动正在进行无法取消的`error` } else if (scrollTop >= scrollHeight - containerHeight && newTargetY - targetY < 0 ) { // 到底 console.log("到底"); if(e.cancelable) e.preventDefault(); // 必须判断`cancelable` 否则容易出现滚动正在进行无法取消的`error` } } btn.addEventListener("click", e => { mask.classList.remove("hide"); body.addEventListener("touchmove", touchMoveEventHandler, { passive: false }); }) mask.addEventListener("click", e => { mask.classList.add("hide"); body.removeEventListener("touchmove", touchMoveEventHandler); }) })(); </script> </html>

body fixed#

目前常用的方案就是该方案了,要阻止页面滚动,可以将其固定在视图中即position: fixed,这样它就无法滚动了,当蒙层关闭时再释放,当然还有一些细节要考虑,将页面固定视图后内容会回头最顶端,这里我们需要记录一下用来同步top值,这样就可以得到一个兼容移动端与PC端的较为完善的方案了,当然对于浏览器的api兼容性是使用document.documentElement.scrollTop控制还是window.pageYOffset + window.scrollTo控制就需要另行适配了。在示例中为了演示弹窗时不会导致视图重置到最顶端,将弹窗按钮移动到了下方。

Copy
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>蒙层禁止页面滚动的方案</title> <style type="text/css"> #mask{ position: fixed; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .hide{ display: none !important; } .long-content > div{ height: 300px; } .mask-content{ width: 300px; height: 100px; overflow-x: auto; background: #fff; } .mask-content > div{ height: 300px; } </style> </head> <body> <div class="long-content"> <div>long content</div> <div>long content</div> <div>long content</div> <button id="btn">弹窗</button> <div>long content</div> <div>long content</div> <div>long content</div> <div>long content</div> </div> <div id="mask" class="hide"> <div class="mask-content"> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> <div>mask-content</div> </div> </div> </body> <script type="text/javascript"> (() => { const btn = document.getElementById("btn"); const mask = document.getElementById("mask"); const body = document.body; let documentTop = 0; // 记录按下按钮时的 `top` btn.addEventListener("click", e => { mask.classList.remove("hide"); documentTop = document.scrollingElement.scrollTop; body.style.position = "fixed" body.style.top = -documentTop + "px"; }) mask.addEventListener("click", e => { mask.classList.add("hide"); body.style.position = "static"; body.style.top = "auto"; document.scrollingElement.scrollTop = documentTop; }) })(); </script> </html>

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
https://zhuanlan.zhihu.com/p/373328247 https://ant.design/components/modal-cn/ https://juejin.cn/post/6844903519636422664 https://segmentfault.com/a/1190000038594173 https://www.cnblogs.com/padding1015/p/10568070.html https://blog.csdn.net/licanty/article/details/86590360 https://blog.csdn.net/xiaonuanli/article/details/81015131
posted @   WindRunnerMax  阅读(2827)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2021-01-10 汇总区间
点击右上角即可分享
微信分享提示
CONTENTS