如何在 React 中处理 Table 中的滚动条事件

Question

我正在使用 React Bootstrap Table 我想要一个关于水平滚动的事件这就是我所做的，但似乎不起作用

useEffect(() => {
    let control = document.querySelector('.react-bootstrap-table');
    control.addEventListener('scroll', handleScroll, { passive: true })
  }, []);


  function handleScroll() {
    console.log("hello")
  }

CSS

.react-bootstrap-table{
    overflow-x: auto;
}

Answer 1

您需要将事件侦听器添加到 window 而不是元素：

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


  function handleScroll(e) {
    if (e.currentTarget.className === 'react-bootstrap-table') {
       console.log("hello")
    }
  }

如何在 React 中处理 Table 中的滚动条事件

How to Handle Scrollbar event in a Table in React

reactjs

react-native

react-bootstrap-table

react-hooks