Borislav Hadzhiev
Reading time·3 min
Photo from Unsplash
div
element in Reactwindow
object in Reactdiv
element in React #To handle the onScroll event in React:
onScroll
prop on an element to listen for the scroll
event.event.currentTarget.scrollTop
property to get the number of
pixels the element is scrolled vertically.import {useState} from 'react'; export default function App() { const [scrollTop, setScrollTop] = useState(0); const handleScroll = event => { setScrollTop(event.currentTarget.scrollTop); }; return ( <div> <h2>Scroll Top: {scrollTop}</h2> <div style={{ border: '3px solid black', width: '400px', height: '100px', overflow: 'scroll', }} onScroll={handleScroll} > {[...Array(20)].map((_, index) => ( <p key={index}>Content {index}</p> ))} </div> </div> ); }
We set the onScroll
prop on the div
element, so every time the user scrolls
the horizontal or vertical axis of the div
, the handleScroll
function gets
invoked.
Notice that we used the currentTarget
property on the event
object to get
access to the element.
const handleScroll = event => { setScrollTop(event.currentTarget.scrollTop); };
currentTarget
property on the event gives us access to the element that the event listener is attached to.On the other hand, the target
property on the event
gives us a reference to
the element that triggered the event (could be a descendant).
We used the Element.scrollTop property to get the number of pixels the element's content is scrolled vertically.
The last step is to update the state
variable using the
useState hook.
setScrollTop(event.currentTarget.scrollTop);
The setScrollTop
function takes care of updating the scrollTop
state
variable every time the scrolls the vertical axis of the div
.
You can use the
addEventListener
method to handle the onScroll
event on the window
object.
window
object in React #To handle the onScroll event on the window
object:
scroll
event listener to the window
object in your useEffect
hook.window.scrollY
property to get the number of pixels that the
document is vertically scrolled.import {useEffect, useState} from 'react'; const App = () => { const [scrollTop, setScrollTop] = useState(0); useEffect(() => { const handleScroll = event => { setScrollTop(window.scrollY); }; window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); return ( <div> <div style={{ position: 'fixed', padding: '10px 0', top: '0', backgroundColor: 'white', borderBottom: '3px solid black', width: '100%', }} > <h2>Scroll Top: {scrollTop}</h2> </div> <div style={{marginTop: '10rem'}}> {[...Array(100)].map((_, index) => ( <p key={index}>Content {index}</p> ))} </div> </div> ); }; export default App;
The addEventListener
method takes the following 2 arguments:
Name | Description |
---|---|
type | the type of the event to listen for |
listener | a function to be invoked when the event is triggered |
The scroll event is triggered when the document view has been scrolled.
We passed an empty dependencies array to the
useEffect hook
because we only want to register the scroll
event listener once - when the
component mounts.
useEffect(() => { const handleScroll = event => { setScrollTop(window.scrollY); }; window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []);
We used the window.scrollY
property to update the scrollTop
state variable.
The
window.scrollY
property on the window
object returns the number of pixels that the document
is currently scrolled vertically.
If you set the onScroll
prop on an element, you would use the
Element.scrollTop
property instead as shown in the previous subheading.
useEffect
hook is called when the component unmounts.return () => { window.removeEventListener('scroll', handleScroll); };
We used the removeEventListener method to remove the event listener that we previously registered.
The removeEventListener
method takes the following 2 arguments:
Name | Description |
---|---|
type | the type of event for which to remove an event listener |
listener | the event listener function of the event handler to remove from the event target |
The cleanup step is important because we want to make sure we don't have any memory leaks in our application.
The scrollTop
property returns the number of pixels that an element's content
is scrolled vertically.