React onScroll
helps to listen for scroll interactions within specific elements and trigger actions accordingly. It triggers whenever the scrolling position changes within the specified element. It is useful when implementing infinite scrolling, parallax effects, lazy loading, or dynamic UI changes.
It is similar to the HTML DOM onscroll event but uses the camelCase convention in React.
Syntax:
<element onScroll={function}/>
Parameter: The parameter for the onScroll
event handler is a function that represents the action to be taken when the scrolling position is changed.
Return type: The return type of the function attached to onScroll
doesn't have a return value or a defined return type. Its purpose is to execute a set of instructions or perform actions in response to the scroll event.
Example 1: Basic implementation of onScroll() event to get the scroll position.
JavaScript
// App.js
import React, { useState } from "react";
function App() {
const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = (e) => {
const { scrollTop, scrollHeight, clientHeight } = e.target;
const position = Math.ceil(
(scrollTop / (scrollHeight - clientHeight)) * 100
);
setScrollPosition(position);
};
return (
<div
className="scrollable-element"
style={{
height: "300px",
overflowY: "scroll",
border: "1px solid #ccc",
}}
onScroll={handleScroll}
>
<h1 style={{ position: "fixed", color: "red" }}>
Scroll Position: {scrollPosition}px
</h1>
<p>
Each and every modern webpage that we create today tend to have
user interactions. When the user interacts with the web
application events are fired. That event can be a mouse click, a
keypress, or something rare like connecting the battery with a
charger. From the developer side, we need to ‘listen’ to such
events and then make our application respond accordingly. This
is called event handling that provides a dynamic interface to a
webpage. Like JavaScript DOM, React also provides us some
built-in methods to create a listener that responds accordingly
to a specific event.Now we will look at certain rules to keep in
mind while creating events in React. camelCase Convention:
Instead of using lowercase we use camelCase while giving names
of the react events. That simply means we write ‘onClick’
instead of ‘onclick’. Pass the event as a function: In React we
pass a function enclosed by curly brackets as the event listener
or event handler, unlike HTML where we pass the event handler or
event listener as a string. Prevent the default: Just returning
false inside the JSX element does not prevent the default
behavior in react. Instead, we have to call the ‘preventDefault’
method directly inside the event handler function. Each and
every modern webpage that we create today tend to have user
interactions. When the user interacts with the web application
events are fired. That event can be a mouse click, a keypress,
or something rare like connecting the battery with a charger.
From the developer side, we need to ‘listen’ to such events and
then make our application respond accordingly. This is called
event handling that provides a dynamic interface to a webpage.
Like JavaScript DOM, React also provides us some built-in
methods to create a listener that responds accordingly to a
specific event.Now we will look at certain rules to keep in mind
while creating events in React. camelCase Convention: Instead of
using lowercase we use camelCase while giving names of the react
events. That simply means we write ‘onClick’ instead of
‘onclick’. Pass the event as a function: In React we pass a
function enclosed by curly brackets as the event listener or
event handler, unlike HTML where we pass the event handler or
event listener as a string. Prevent the default: Just returning
false inside the JSX element does not prevent the default
behavior in react. Instead, we have to call the ‘preventDefault’
method directly inside the event handler function.
</p>
</div>
);
}
export default App;
Output:
Example 2: Basic implementation of onScroll() event to change the background color according to scroll position.
JavaScript
//App.js
import React, { useState } from "react";
function App() {
const [backgroundColor, setBackgroundColor] = useState("white");
const handleScroll = (event) => {
const { scrollTop, scrollHeight, clientHeight } = event.target;
const scrollRatio = scrollTop / (scrollHeight - clientHeight);
if (scrollRatio > 0.5) {
setBackgroundColor("lightblue");
} else {
setBackgroundColor("white");
}
};
return (
<div
className="scrollable-section"
style={{
height: "300px",
overflowY: "scroll",
border: "1px solid #ccc",
backgroundColor: backgroundColor,
transition: "background-color 0.5s ease",
}}
onScroll={handleScroll}
>
<p style={{ paddingTop: "200px", textAlign: "center" }}>
Scrollable Section
</p>
<p style={{ paddingTop: "500px", textAlign: "center" }}>
Keep scrolling...
</p>
<p style={{ paddingTop: "800px", textAlign: "center" }}>
Background Changes on Scroll
</p>
</div>
);
}
export default App;
Output:
Similar Reads
React onClick Event The onClick event in React is used for handling a function when an element, such as a button, div, or any clickable element, is clicked.SyntaxonClick={handleClick}ParameterThe callback function handleClick which is invoked when onClick event is triggeredReturn TypeIt is an event object containing in
3 min read
React onBlur Event In React, handling user interactions efficiently is important for building responsive and dynamic applications. One of the commonly used events for managing focus behaviour is the onBlur event. This event is important for tracking when a user moves the focus away from an element, such as an input fi
6 min read
React onDoubleClick Event The onDoubleClick event in React is a native DOM event that triggers when the user double-clicks on an element, typically using the left mouse button. This event is part of a group of mouse events that React handles, including onClick, onMouseDown, onMouseUp, and others.onDoubleClick occurs when a m
5 min read
React onMouseDown Event The onMouseDown event is a native DOM event in React that triggers when the mouse button is pressed down on an element. It is part of a set of mouse events that React and the DOM handle, which includes events like onClick, onMouseUp, onMouseEnter, and others.onMouseDown occurs when any mouse button
5 min read
React onMouseMove Event React onMouseMove event detects a mouse movement over an element. The event triggers when the mouse pointer moves while positioned over an element. It is particularly useful where you want to track and respond to the movement of the user's cursor.It is similar to the HTML DOM onmousemove event but u
2 min read
React onMouseMove Event React onMouseMove event detects a mouse movement over an element. The event triggers when the mouse pointer moves while positioned over an element. It is particularly useful where you want to track and respond to the movement of the user's cursor.It is similar to the HTML DOM onmousemove event but u
2 min read