Javascript 更改工具栏的背景色，并在主体被翻转时进行反应

当正文滚动时，我试图将工具栏背景颜色更改为

#fff

颜色。否则它将是

透明的

以下是工具栏组件示例：

export default class ToolBar extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      scrolled:false
    }
  }
  render() {
    const { children, className,scrolled, ...other } = this.props
    return (
      <nav style={{backgroundColor:this.state.scrolled?'#fff':'transparent'}}>
        {children}
      </nav>
    )
  }
}

导出默认类工具栏扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
滚动：false
}
}
render（）{
const{children，className，滚动，…other}=this.props
返回(
{儿童}
)
}
}

---

如何使用react实现这一点？

只需向窗口对象添加一个事件侦听器

componentDidMount() {
   window.addEventListener('scroll', this.checkScroll);
}

checkScroll = () => {
   this.setState({ scrolled: window.scrollY > 0 });
};

注意：您可能还需要一些去抖动，以避免快速和多个设置状态

并记住在组件销毁时断开侦听器

componentWillUnmount() {
   window.removeEventListener('scroll', this.checkScroll);
}

---

这回答了你的问题吗？不，这是关于效果的。但我尝试使用背景色。副本显示了如何附加

onscroll

侦听器并使用它来更改状态，这正是您需要解决的问题。工作正常。我只是想知道这个状态是如何检查滚动是否结束的？@kodcu每次滚动事件都会触发它，这就是为什么你需要一些去抖动：）