Question

以下是我的handleScroll函数，如果它向下滚动到特定限制，则尝试在其中添加red类，否则请应用blue。但是，这仅在else语句内进行，并且仅console.log(e.target.scrollTop);的{{1}}安慰。让我知道我在这里做错了。

代码-

undefined

Codesandbox-https://codesandbox.io/s/silly-feynman-m6hp1

Answer 1

我强烈建议您添加额外的支票。滚动一次时，您会在一定范围（100）之后多次更新组件状态，这是不必要的。您只需要更新一次。

由于您已经满足class App extends React.Component { constructor(props) { super(props); this.state = { navBckgroundColor: `blue`, altered: false }; } componentDidMount() { window.addEventListener("scroll", this.handleScroll); } //use arrow function instead so that its "this" keyword points to the component's execution context. Otherwise, "this" will point to the global window object where you cannot use this.setState. handleScroll = e => { if (window.pageYOffset > 100 && !this.state.altered) { this.setState({ navBckgroundColor: `red`, altered: true }); } else if(window.pageYOffset < 100 && this.state.altered) { this.setState({ navBckgroundColor: `blue`, altered: false }); } }; render() { return ( <div className="App"> <Navbar bckGroundColor={this.state.navBckgroundColor} /> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } }中的条件，因此它将不断更新，即使背景已经更改。大量更新会导致您的应用崩溃。

尝试类似的方法，它将按预期且仅在必要时更新组件状态：https://codesandbox.io/s/white-architecture-jepyc

{{1}}

Answer 2

请使用

handleScroll = e => {
    console.log(e.target.scrollTop);
    if (window.scrollY > 100) {
      this.setState({
        navBckgroundColor: `red`
      });
    } else {
      this.setState({
        navBckgroundColor: `blue`
      });
    }
  }

请在上查看可行的代码：

https://codesandbox.io/s/friendly-swirles-bwl06

您的window.screenX也将始终输出相同的值，因此颜色不变。

我也在代码中进行了更改

Answer 3

使用window.scrollY代替window.screenY，并绑定handleScroll方法。

handleScroll = (e) => {
    if (window.scrollY > 100) {
      this.setState({
        navBckgroundColor: `red`
      });
    } else {
      this.setState({
        navBckgroundColor: `blue`
      });
    }
  }

Working demo

类没有在滚动中改变反应

3 个答案: