tua-body-scroll-lock踩坑记录

在日常工作中,我们经常会遇到拉起弹窗时要禁止页面的滚动,此时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)

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

相关推荐
心.c6 分钟前
深拷贝浅拷贝
开发语言·前端·javascript·ecmascript
IT_陈寒36 分钟前
Vue 3.4性能优化实战:5个鲜为人知的Composition API技巧让打包体积减少40%
前端·人工智能·后端
前端九哥41 分钟前
💻【急招!27届前端实习生】广州4399实习太幸福了!江景+三餐+健身房全都有😭
前端·面试·招聘
咖啡の猫1 小时前
Vue全局事件总线
前端·javascript·vue.js
Lovereo1 小时前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
T___T1 小时前
JavaScript 变量声明详解:var、let、const 的核心差异
javascript·面试
蒙娜丽宁1 小时前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花1 小时前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端1 小时前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端
白水清风1 小时前
Vue3之渲染器
前端·vue.js·面试