How to Handle Scrollbar event in a Table in React

Question

I am using React Bootstrap Table and I want an event on the Horizontal Scrolling This is what I have done and it does not seems to work

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

You need to add the event listener to window and not the element:

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


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