Why is the onScroll event not working in React?

A

Alex Krynytskyi2021-01-21 02:51:17

React

Alex Krynytskyi, 2021-01-21 02:51:17

Why is the event not working?

const Home = () => {

  function test() {
    console.log('work');
  }

  return (
    <div onScroll={test} className='Home'>
      <Header/>
      
    </div>
  );
};

export default Home;

onWheel works, but the question is, does onWheel work when the user scrolls with the slider and not with the mouse wheel?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

nowm, 2021-01-21
@NEOmanceR

onScrollmay not work due to the fact that it is not the element on which it is hung that scrolls, but some other parent element. For example, by default, if you do not separately take care that a specific element scrolls, then the scroll will occur in <body>and will not be passed to child elements.
onWheelfires when the mouse wheel is spinning, and this event can be caught by the element on which the cursor is located at the time of scrolling.
I hope you understand the difference between these two events. To catch scrolling in this particular case, you need to make sure that this particular element is scrolling. For example, you can do this:

body {
    max-height: 100vh;
    overflow: hidden;
}

.scrollable {
    max-height: 100vh;
    overflow: scroll;
}

export default function Home() {
    const handleScroll = event => {
        console.log('scrolling...', event);
    }

    return (
        <div onScroll={handleScroll} className='Home scrollable'>
            <Header/>
        </div>
    );
}