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)

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

相关推荐
kura_tsuki1 小时前
[Web网页] Web 基础
前端
鱼樱前端2 小时前
uni-app快速入门章法(二)
前端·uni-app
silent_missile2 小时前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
克里斯蒂亚诺更新3 小时前
微信小程序app.js中每30秒调用一次wx.getLocation
javascript·微信小程序·小程序
IT_陈寒3 小时前
Vue 3.4 实战:这7个Composition API技巧让我的开发效率飙升50%
前端·人工智能·后端
鄃鳕3 小时前
C++坑系列,C++ std::atomic 拷贝构造函数问题分析与解决方案
java·javascript·c++
少年阿闯~~4 小时前
HTML——1px问题
前端·html
Never_Satisfied4 小时前
在JavaScript / HTML中,实现`<iframe>` 自适应高度
开发语言·javascript·html
Mike_jia5 小时前
SafeLine:自托管WAF颠覆者!一键部署守护Web安全的雷池防线
前端
brzhang5 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构