当有popup的时候，禁止页面滚动方案

当有popup的时候，禁止页面滚动方案

• 问题背景

  • 有时候我们需要做一个弹窗，当弹窗出现的时候，我们有可能想要禁止整个页面滚动。

• 解决方案

  • 使用css

    • 我们知道页面的滚动是由于页面内容超出viewport，且overflow属性被设置为auto或scroll。

      useEffect(() => {
        const handle = () => {
          if(isLockScroll)
          {
            document.body,style.overflow = 'hidden';
          }
          else{
            document.body.style.overflow = '';
          }
        }
      },[isLockScroll])