NEOmanceR
@NEOmanceR
Начинающий веб разработчик

Почему не работает событие onScroll в React?

Подскажите почему не работает событие?

const Home = () => {

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

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

export default Home;


onWheel работает но возникает вопрос работает ли onWheel когда пользователь скролит за ползунок а не колесом мышки ?
  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
nowm
@nowm
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>
    );
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы