Question

我有一个使用滚动事件的react组件。当滚动事件被调用时，它基本上按预期运行处理程序。但是，当滚动事件开始触发时，我需要能够调用一次方法。我了解防抖方法的想法，该方法会在滚动停止时触发，但是我需要找到一种在滚动开始时触发一次的方法。（确保不能使用jQuery。）

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

    this.setState({
        // sets some state which is compared in a shouldComponentUpdate
    });
}

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

shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
}

下面看到的处理程序运行一些代码：

onScroll() {
    this.scrollTop = document.documentElement.scrollTop;
    this.update();
}

但是我需要一个可以运行一次的函数：

scrollStart() {

}

我想说我尝试了一些东西，但不幸的是我没有想法。任何帮助将不胜感激。

Answer 1

浏览器中没有真正的滚动状态；滚动事件发生，然后结束。

您可以例如每次用户滚动时都要创建一个新的超时，如果在运行超时功能之前用户没有滚动过，则将自己的滚动状态设置为false。

示例

class App extends React.Component {
  timeout = null;
  state = { isScrolling: false };

  componentDidMount() {
    window.addEventListener("scroll", this.onScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll);
  }

  onScroll = () => {
    clearTimeout(this.timeout);
    const { isScrolling } = this.state;

    if (!isScrolling) {
      this.setState({ isScrolling: true });
    }

    this.timeout = setTimeout(() => {
      this.setState({ isScrolling: false });
    }, 200);
  };

  render() {
    return (
      <div
        style={{
          width: 200,
          height: 1000,
          background: this.state.isScrolling ? "green" : "red"
        }}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

您是否希望scrollStart（）函数在用户第一次滚动时仅触发一次？如果这样做，可以使用scrollStarted变量轻松完成。 if (scrollStarted == false) { scrollStarted = true; scrollStart(); }。

如果您希望用户从顶部开始滚动时触发该功能（如果用户返回顶部，则可以再次触发），我可以想象出类似的情况。只需将(scrollStarted == false)替换为scrollTop == 0。

Answer 3

为此，您可以定义一个静态变量，并在滚动开始时，将true放入变量中，然后输入一个while，该变量会一直检查scrool是否继续。使用这种逻辑，您也许可以做点什么。

滚动开始时调用方法

3 个答案: