让我们面对现实吧，可怕的“滚动离开”时刻——当用户点击模式时，整个页面却继续向下滚动，这种尴尬的情况！这会打乱流程，让用户感到沮丧，并带来不太好的体验。
但不要害怕，各位小伙伴！为了防止这种常见的网站烦恼比您想象的要容易。以下是4种久经考验的方法，每种方法都有自己的优点和缺点：
1. Overflow:hidden — 经典方法overflow:hidden CSS 属性是一种久经考验的防止滚动的方法。只需将一个类（例如，no-scroll）添加到 <body> 标签，并将其链接到带有 overflow:hidden 的 CSS 规则。
复制
.no-scroll { overflow: hidden;}1.2.3.当模态框弹出时，使用 JavaScript 添加此类，并在模态框关闭时将其删除。此方法会停止滚动并隐藏滚动条。
2. Position: Fixed — 修复程序想要在模态框弹出时保持页面原位？position: fixed 可以提供帮助！
向<body> 添加 no-scroll 之类的类并应用以下 CSS：
复制
.no-scroll { position: fixed; width: 100%;}1.2.3.4.这会将页面锚定到视口，保持其原始宽度。请记住确保您的模态框具有适当的高度，否则内容可能会被截断。
3. 滚动事件 — JavaScript 大师对于更注重 JavaScript 的方法，我们可以使用滚动事件在模态框出现时禁用滚动。
复制
document.addEventListener('scroll', disableScroll);function disableScroll() { window.scrollTo(0, 0);}1.2.3.4.当模式关闭时，删除事件监听器以重新启用滚动。此方法不需要更改 CSS，并且在桌面和移动设备上都能很好地工作。
4. Overscroll-Behavior：Contain — 现代选择准备好采用更现代的方法了吗？overscroll-behavior 属性可以控制页面边缘的滚动行为。
复制
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); overscroll-behavior: contain;}1.2.3.4.5.6.7.通过将其设置为包含，可以阻止页面滚动，但允许在模式本身内滚动。请记住在模式关闭时删除此属性。
总结，请选择合适的武器这 4 种方法都提供了在模式弹出时，阻止页面滚动的不同方法。再具体项目开发时，我们需要选择适合自己项目的情况，来匹配项目的需要，不能随意选择。
更多资讯，点击
