javascript - 如何在 react 中切换滚动事件的类？

Question

如果页面在 react 中滚动，我需要在元素上添加或删除类我写了这样的代码来跟踪页面滚动:

export default class TestComponenet extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);
    this.state = {
      scrolled: false
    }
  }

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

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

  handleScroll(event) {
    this.setState({srolled: true});
  };

  render() {
    return (
      <div className ={scrolled ? 'scrolling' : ''}></div>
    );
  }
}

但我只能跟踪滚动，但不能动态切换类。

Answer 1

浏览器中没有真正的“滚动状态”。当用户滚动时，您会收到一个事件，然后结束。如果用户有一段时间没有滚动，您可以保留一个超时，将其设置为不滚动:

示例

class App extends React.Component {
  state = {
    scrolled: false
  };

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = event => {
    this.setState({ scrolled: true });

    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.setState({ scrolled: false });
    }, 200);
  };

  render() {
    const { scrolled } = this.state;

    return (
      <div
        className={scrolled ? "scrolling" : ""}
        style={{
          width: 200,
          height: 1000,
          backgroundColor: scrolled ? "blue" : "red"
        }}
      />
    );
  }
}