在React.js中添加滚动事件的事件监听器后没有得到回调

Question

我遵循了这篇文章的指示更新React.js中组件onScroll的样式，为scroll事件注册事件监听器。

我有一个React组件，它从React Bootstrap库中呈现一个Table组件https://react-bootstrap.github.io/

我认为我正确地注册了事件侦听器，但我不确定为什么当我向下滚动表时，我的handleScroll（）回调没有被调用。是因为事件侦听器没有在实际的表本身上注册吗？

谢谢你花时间阅读我的问题。如有任何反馈，我们将不胜感激。

下面是我如何注册事件侦听器的一个片段。

  handleScroll: function(event) {
    console.log('handleScroll invoked');
  },
  componentDidMount: function() {
    console.log('componentDidMount invoked');
    window.addEventListener('scroll', this.handleScroll);
  },
  componentWillUnmount: function() {
    console.log('componentWillUnmount invoked');
    window.removeEventListener('scroll', this.handleScroll);
  },

这是我的渲染函数的一个片段。

  render: function() {
    var tableRows = this.renderTableRow(this.props.sheet);
    return (
      <Table striped bordered condensed hover>
        <TableHeaderContainer
          tableTemplateName={this.props.tableTemplateName}
          sheetName={this.props.sheet.name}/>
        <tbody>
          {tableRows}
        </tbody>
      </Table>
    );
  }

Answer 1

您的代码看起来不错，所以滚动的可能不是窗口本身。桌子是放在div还是有overflow: auto或overflow:scroll的东西里？如果是这样，侦听器必须连接到正在滚动的实际元素，例如

document.querySelector('.table-wrapper')
    .addEventListener('scroll', this.handleScroll);

如果是这种情况，那么只需在代码中的包装器中添加一个React onScroll处理程序将是更好的

<div onScroll={this.handleScroll}><Table....

Answer 2

对我来说，唯一有效的方法是将true添加到EventListener:中的第三个参数中

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

来源：https://github.com/facebook/react/issues/5042#issuecomment-145317519

Answer 3

当使用钩子时，您可以这样实现它。请注意，当组件不再挂载时，删除事件侦听器非常重要。

useEffect钩子中的return语句将在组件卸载时执行。

const handleScroll = () => {
  console.log('Scrolling...');
};
useEffect(() => {
  window.addEventListener('scroll', handleScroll, true);
  // Remove the event listener
  return () => {
    window.removeEventListener('scroll', handleScroll, true);
  };
}, []);

Answer 4

这已经很老了，但公认的答案启发了我解决问题的方法。我还有一个NextJS应用程序，我设置了以下CSS:

html, body {
    overflow-x: hidden;
}
body {
    position: relative;
}

这是为了防止任何元素主要为移动设备创建水平边栏。但是，它会导致window.addEventListener(scroll)无法工作。最终对我有效的是做：document.querySelector('body').addEventListener(scroll, handler)。

希望这能帮助其他处于类似情况的人。

Answer 5

谢谢dannyjolie-这项工作

elementScrollData = (value) => {
  console.log('elementScrollData ', value);
} 
return (
      <div className="css-scroll-class" onScroll={elementScrollData}>
          Scroll element
      </div>
       );
}

Answer 6

我在Next.js应用程序中遇到了同样的问题。其中一个问题是，我在根容器上放置了一个overlowX:hidden属性。在删除它并将下面的代码放在根组件中之后，一切都很好。

检查放置此挂钩的位置，查看是否有任何溢出属性并将其移除。谢谢

  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const scrollTotal =
        document.documentElement.scrollHeight -
        document.documentElement.clientHeight;
      if (document.documentElement.scrollTop / scrollTotal > 0.8) {
        setShow(true);
      } else {
        setShow(false);
      }
    };
    document.addEventListener("scroll", onScroll, true);
    return () => document.removeEventListener("scroll", onScroll, true);
  }, []);