tua-body-scroll-lock踩坑记录

郑板桥302025-09-13 22:46

在日常工作中，我们经常会遇到拉起弹窗时要禁止页面的滚动，此时tua-body-scroll-lock库就是一个很好的选择。但是最近在维护老项目的时候发现这个项目会监听滚动事件，当滚到到某个地方时就会给标题栏一个底色，如下面代码

javascript 复制代码

      window.addEventListener('scroll', () => {
        if (window.scrollY >= 30) {
          setScroll(1)
        } else {
          setScroll(0)
        }
      }, false)

但是在滑动过程中如果调用lock方法，此时window.scrollY会变为0，会导致标题栏的底色消失，这样的体验很不佳，用户可能会认为有bug。解决方法也很简单，在调用lock时存一个变量，当scroll事件回调发现这个变量为true时也认为此时页面已经滚动了，如下面代码

javascript 复制代码

//调用lock的逻辑
  useEffect(() => {
      if(defaultLock) {
        lock();
        lockRef.current = true;
        window.lock = true;
      }
  }, [])


//监听事件也需要修改下
window.addEventListener('scroll', () => {
  //弹窗打开时会调用lock方法，此时window.scrollY会变为0，所以在弹窗打开时特殊处理下
  if (window.scrollY >= myCoinHeight || window.lock) {
     setMyCoinStatus(1)
   } else {
     setMyCoinStatus(0)
   }
  }, false)

这样处理后就可以避免上面提到的情况了