不用 JS，轻松锁定页面滚动！

文章预览

在平时开发中，经常会遇到这样一种问题： 当打开一个弹窗时，后面的页面是可以滚动的，演示如下： 那么，该如何锁定页面的滚动呢？ 一、传统的实现方式 传统的方式其实也不复杂，就是在打开弹窗时阻止滚动就行了，通常是改变 overflow 属性 const openModal = () => { document .body.style.overflow = 'hidden' } const closeModal = () => { document .body.style.overflow = 'auto' } 如果是在现代框架里，比如 vue ，可以用监听弹窗状态来实现 watch ( () => show.value, (val) => { if (val) { document .body.style.overflow = 'hidden' } else { document .body.style.overflow = 'auto' } }, ) 这样就能锁定滚动了 二、传统方式的局限 虽然上面的实现看似完美，其实还有潜在问题的。比如有多个弹窗，弹窗覆盖的情况下，这个时候锁定就会出问题了。 因为在关闭第二个 ………………………………