Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
What is the usage of onscroll event in JavaScript?
The onscroll event in JavaScript occurs when an element's scrollbar is being scrolled. This event is commonly used to create interactive features like scroll-triggered animations, infinite scrolling, or scroll position indicators.
Syntax
element.onscroll = function() {
// Code to execute when scrolling
};
// Or using addEventListener
element.addEventListener('scroll', function() {
// Code to execute when scrolling
});
Basic Example
Here's a simple example showing how to detect when a div element is scrolled:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
width: 300px;
height: 100px;
overflow: scroll;
padding: 10px;
}
</style>
</head>
<body>
<div id="content">
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
</div>
<p id="myScroll"></p>
<script>
document.getElementById("content").onscroll = function() {
myFunction();
};
function myFunction() {
document.getElementById("myScroll").innerHTML = "Scroll successful!";
}
</script>
</body>
</html>
Window Scroll Example
You can also detect scrolling on the entire window to create effects like scroll progress bars:
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 200vh; /* Make page scrollable */
margin: 0;
font-family: Arial, sans-serif;
}
#scrollInfo {
position: fixed;
top: 10px;
right: 10px;
background: #333;
color: white;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Scroll down to see the scroll position</h1>
<div id="scrollInfo">Scroll Position: 0px</div>
<script>
window.onscroll = function() {
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
document.getElementById("scrollInfo").innerHTML = "Scroll Position: " + Math.round(scrollPosition) + "px";
};
</script>
</body>
</html>
Common Use Cases
| Use Case | Description | Example Application |
|---|---|---|
| Scroll Progress | Show how much of the page has been scrolled | Reading progress bars |
| Lazy Loading | Load content when it comes into view | Image galleries, infinite scroll |
| Sticky Navigation | Change navigation style based on scroll position | Header that shrinks on scroll |
Key Points
- The
onscrollevent fires continuously while scrolling occurs - It can be applied to any scrollable element or the window object
- Consider using throttling for performance with frequent scroll events
- Use
addEventListener('scroll', callback)for better event handling
Conclusion
The onscroll event is essential for creating dynamic, interactive web experiences. Use it to respond to user scrolling and create engaging features like progress indicators and lazy loading.
Updated on: 2026-03-15T23:18:59+05:30
244 Views
Advertisements