在日常工作中,我们经常会遇到拉起弹窗时要禁止页面的滚动,此时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)
这样处理后就可以避免上面提到的情况了