当有popup的时候,禁止页面滚动方案
问题背景
- 有时候我们需要做一个弹窗,当弹窗出现的时候,我们有可能想要禁止整个页面滚动。
解决方案
使用css
我们知道页面的滚动是由于页面内容超出viewport,且overflow属性被设置为auto或scroll。
useEffect(() => { const handle = () => { if(isLockScroll) { document.body,style.overflow = 'hidden'; } else{ document.body.style.overflow = ''; } } },[isLockScroll])