Javascript 用户向下滚动时的反应

使用React，什么是使功能滚动的正确方法

---

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

您必须使用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>
    );
  }
}

从“React”导入React；
导出默认类App扩展React.Component{
componentDidMount（）{
document.addEventListener（'scroll'，this.onScroll）；
}
组件将卸载（）{
document.removeEventListener（'scroll'，this.onScroll）；
}
onScroll（）{
var scrollY=window.scrollY；
如果（滚动===500）{
log（`Scrolled${scrollY}px`）；
}
}
render（）{
返回(
一些内容
{this.props.children}
);
}
}

---

这个代码示例应该能让您很好地了解将应用程序带到何处。我希望这会有所帮助。

您可能希望订阅

窗口上的活动

要附加侦听器，您需要调用
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);
  }
}