Question

我正在构建一个应用程序（ES6），我很好奇捕捉向上/向下滚动事件的“正确”方法是什么？

我尝试（npm）安装react-scroll-listener但我无法使用我的ES6类。

基本上我想：如果向上滚动，请执行此操作;如果向下滚动，请执行其他操作。

setTimeout

Answer 1

这是挂钩任何听众的一般建议：

在componentDidMount中附加内容，在componentWillUnmount

中取消附加内容

class Whatever extends Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, { passive: true })
  }

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

  handleScroll(event) {
    // do something like call `this.setState`
    // access window.scrollY etc
  }
}

Answer 2

实际上有很多方法可以做到，但是对我来说，使用React钩子更容易，您要做的就是：

为滚动位置定义状态
用于更新滚动位置状态的功能
安装组件时开始滚动侦听
在组件卸载时停止监听

类似的东西：

import React, { useState, useEffect } from 'react';

...
// inside component:

const [scrollPosition, setSrollPosition] = useState(0);
const handleScroll = () => {
    const position = window.pageYOffset;
    setSrollPosition(position);
};

useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
}, []);

现在您可以使用以像素为单位的scrollPosition

在这种特殊情况下，useEffect将等效于componentDidMount，因为它将在组件安装后立即触发，而且在所有更新之后也会触发，但是 addEventListener非常聪明，不会启动重复的侦听器

useEffect内部的返回值等同于componentWillUnmount，当组件卸载时，它将被“调用”。

反应 - 听取向上/向下滚动？

2 个答案: