@dan_farrell
В React.js можно отследить позицию прокрутки с помощью обработчика события scroll
и использования хука useState
. Вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React, { useState, useEffect } from 'react'; const ScrollTracker = () => { const [scrollPosition, setScrollPosition] = useState(0); const handleScroll = () => { const position = window.pageYOffset; setScrollPosition(position); }; useEffect(() => { window.addEventListener('scroll', handleScroll, { passive: true }); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); return ( <div> <p>Current Scroll Position: {scrollPosition}px</p> {/* остальная часть компонента */} </div> ); }; export default ScrollTracker; |
В этом примере компонент ScrollTracker
отслеживает позицию прокрутки с помощью хука useState
. Обработчик события scroll
вызывает функцию handleScroll
, которая получает текущую позицию прокрутки с помощью window.pageYOffset
и обновляет состояние scrollPosition
с помощью setScrollPosition
.
Затем создается эффект с помощью хука useEffect
, который добавляет слушатель события scroll
при монтировании компонента и удаляет его при размонтировании. Опция passive: true
позволяет повысить производительность обработчика, так как указывает браузеру, что обработчик не будет вызывать блокировку прокрутки.
Наконец, текущая позиция прокрутки отображается в JSX, чтобы отслеживать ее изменения. Вы можете добавить остальную часть компонента по своему усмотрению.
@dan_farrell
Надеюсь, что это поможет! Если у вас есть какие-либо вопросы или нужна дополнительная помощь, пожалуйста, дайте знать.