防止滚动处理程序不必要地触发答案

【问题标题】：Prevent scroll handler from firing more than necessary防止滚动处理程序不必要地触发
【发布时间】：2021-09-19 06:07:08
【问题描述】：

我在滚动事件中更改导航栏的背景颜色，它可以工作，但问题是函数changeNavBar 会在每次滚动时触发。我想知道如何让它只在屏幕的某个点被触发。

例如，假设只有当 YPosition 大于 50 时才调用该函数，一旦调用它就不会再次调用，除非屏幕向上滚动并且导航栏到达小于 50 的点。也就是说，我们从0开始，到了50才被调用，但是如果屏幕一直向下滚动就不被调用，不会被调用，YPosition是100、200、1000，没关系。但如果页面向上滚动并达到 50 英寸，它将被调用。

这是我的代码：

const Navigation = props => {

let [navBg, setNavBg] = React.useState('transparent')

let navbarStyle = {
    backgroundColor: navBg
}

const changeNavBar = () => {
    if (window.scrollY > 50) {
        setNavBg('blue')
    } else {
        setNavBg('transparent')
    }

    console.log('test')
}

React.useEffect(() => {
    window.addEventListener('scroll', changeNavBar);
  
    return () =>
      window.removeEventListener('scroll', changeNavBar);
  }, []);



return (
    <div style={navbarStyle}>
        <Logo />
        <MenuNavigation />
    </div>
)
}

问题不在于函数changeNavBar 中发生的情况。我想要的是防止在不需要时调用该函数。

【问题讨论】：

检查navBg在else条件下是否已经透明，如果不透明才设置
尝试使用 Intersection Observer API
@sathya reddy 其实我不知道这是什么，但我会看看。
@ggorlen 实际上并没有。我已经找到了这个答案，这与我正在做的几乎相同。
也许How to slowdown/debounce events handling with react hooks? 是一个更好的欺骗建议？

标签： javascript reactjs

【解决方案1】：

不是每次都执行状态更新，而是先检查是否需要更改。

const changeNavBar = () => {
    if (window.scrollY > 50) {
        if(navBg !== 'blue') setNavBg('blue')
    } else {
        if(navBg !== 'transparent') setNavBg('transparent')
    }
}

【讨论】：