1. Overflow:hidden — 经典方法
overflow:hidden CSS 属性是一种久经考验的防止滚动的方法。只需将一个类（例如，no-scroll）添加到 <body> 标签，并将其链接到带有 overflow:hidden 的 CSS 规则。
.no-scroll {
overflow: hidden;
}当模态框弹出时，使用 JavaScript 添加此类，并在模态框关闭时将其删除。此方法会停止滚动并隐藏滚动条。
2. Position: Fixed — 修复程序
想要在模态框弹出时保持页面原位？position: fixed 可以提供帮助！
向<body> 添加 no-scroll 之类的类并应用以下 CSS：
.no-scroll {
position: fixed;
width: 100%;
}这会将页面锚定到视口，保持其原始宽度。请记住确保您的模态框具有适当的高度，否则内容可能会被截断。
3. 滚动事件 — JavaScript 大师
对于更注重 JavaScript 的方法，我们可以使用滚动事件在模态框出现时禁用滚动。
document.addEventListener('scroll', disableScroll);
function disableScroll() {
window.scrollTo(0, 0);
}当模式关闭时，删除事件监听器以重新启用滚动。此方法不需要更改 CSS，并且在桌面和移动设备上都能很好地工作。
4. Overscroll-Behavior：Contain — 现代选择
准备好采用更现代的方法了吗？overscroll-behavior 属性可以控制页面边缘的滚动行为。
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overscroll-behavior: contain;
}通过将其设置为包含，可以阻止页面滚动，但允许在模式本身内滚动。请记住在模式关闭时删除此属性。
总结，请选择合适的方法
这 4 种方法都提供了在模式弹出时，阻止页面滚动的不同方法。再具体项目开发时，我们需要选择适合自己项目的情况，来匹配项目的需要，不能随意选择。
关于优联前端
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。
