Question

使用React，在滚动上创建函数的正确方法是什么？

例如，如果用户从顶部滚动500px，我希望控制台记录一些东西。做这个的最好方式是什么？

Answer 1

您必须使用DOM来设置滚动事件侦听器。举个例子：

import React from 'react';

export default class App extends React.Component {

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

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

  onScroll() {
    var scrollY = window.scrollY;
    if (scrollY === 500) {
        console.log(`Scrolled ${scrollY} px`);
    }
  }

  render() {
    return (
      <main>
        <div>Some content</div>
        { this.props.children }
      <main>
    );
  }
}

此代码示例应该可以让您了解应用的位置。我希望有所帮助。

Answer 2

您可能希望订阅window上的scroll活动。

要附加一个监听器，您将调用addEventListener并传递一个函数：

window.addEventListener('scroll', someFunction);

现在，关于React何时发挥作用，您可能希望将监听器附加到顶级组件的componentDidMount挂钩中：

class App extends React.Component {
  constructor() {
    super();
    this.handleScroll = this.handleScroll.bind();
  },

  handleScroll(evt) {
    const fromTop = window.scrollY;
  },

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

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

用户向下滚动时的ReactJS

2 个答案: