onScroll может не работать из-за того, что скроллится не элемент, на который он навешан, а какой-нибудь другой родительский элемент. Например, по-умолчанию, если вы не позаботились отдельно, чтобы скроллился какой-то конкретный элемент, то скролл будет происходить в
<body> и передаваться дочерним элементам не будет.
onWheel срабатывает, когда крутится колесо мыши, и поймать это событие можно тем элементом, на котором находится курсор в момент прокрутки.
Я надеюсь, вы поняли разницу между этими двумя событиями. Чтобы ловить скролл в данном конкретном случае, нужно удостовериться, что происходит скроллинг именно этого элемента. Например, можно сделать так:
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>
);
}
