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
HTML onscroll Event Attribute
The onscroll event attribute in HTML is triggered when an element's content is scrolled using its scrollbar. This event fires continuously as the user scrolls through the element's content, making it useful for creating dynamic scroll-based interactions and animations.
The onscroll event can be applied to any HTML element that has scrollable content, including the entire document body, div containers, textarea elements, and other elements with overflow properties set to scroll or auto.
Syntax
Following is the syntax for the onscroll event attribute −
<tagname onscroll="script">Content</tagname>
Where script is the JavaScript code or function to execute when the scroll event occurs.
Example − Basic Scroll Event
Following example demonstrates the basic usage of the onscroll event attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML onscroll Event Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.scroll-box {
border: 2px solid #fff;
padding: 15px;
width: 300px;
height: 150px;
overflow: scroll;
margin: 20px auto;
background: white;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>HTML onscroll Event Attribute Demo</h1>
<div onscroll="scrollFunction()" class="scroll-box">
<p>This is a scrollable div element with overflow content.
This is a scrollable div element with overflow content.
This is a scrollable div element with overflow content.
This is a scrollable div element with overflow content.
This is a scrollable div element with overflow content.
This is a scrollable div element with overflow content.
This is a scrollable div element with overflow content.
This is a scrollable div element with overflow content.
This is a scrollable div element with overflow content.</p>
</div>
<p id="output">Scroll the box above to see the event in action!</p>
<script>
function scrollFunction() {
document.getElementById("output").innerHTML = "Scrolling detected! Font size increased.";
document.querySelector(".scroll-box").style.fontSize = "18px";
}
</script>
</body>
</html>
The output shows a scrollable box. When scrolled, the text "Scrolling detected! Font size increased." appears and the font size increases −
HTML onscroll Event Attribute Demo [Scrollable box with text content] Scroll the box above to see the event in action! (After scrolling: "Scrolling detected! Font size increased.")
Example − Window Scroll Event
Following example shows how to use onscroll on the body element to detect page scrolling −
<!DOCTYPE html>
<html>
<head>
<title>Window Scroll Event</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
height: 200vh;
}
#scroll-indicator {
position: fixed;
top: 10px;
right: 20px;
background: #4CAF50;
color: white;
padding: 10px 15px;
border-radius: 5px;
font-weight: bold;
}
.content {
margin: 50px 0;
padding: 20px;
background: #f0f0f0;
border-radius: 5px;
}
</style>
</head>
<body onscroll="showScrollPosition()">
<div id="scroll-indicator">Scroll Position: 0px</div>
<h1>Page Scroll Detection</h1>
<div class="content">
<h2>Section 1</h2>
<p>This page demonstrates window scroll detection. Scroll down to see the scroll position indicator update in real-time.</p>
</div>
<div class="content">
<h2>Section 2</h2>
<p>Keep scrolling to see how the onscroll event tracks your scroll position continuously.</p>
</div>
<div class="content">
<h2>Section 3</h2>
<p>The scroll position is displayed in the green indicator at the top-right corner of the page.</p>
</div>
<script>
function showScrollPosition() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.getElementById("scroll-indicator").innerHTML = "Scroll Position: " + scrollTop + "px";
}
</script>
</body>
</html>
This example shows a fixed indicator that displays the current scroll position in pixels as you scroll down the page.
Example − Scroll-Based Color Change
Following example demonstrates changing element appearance based on scroll position −
<!DOCTYPE html>
<html>
<head>
<title>Scroll Color Change</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.scroll-container {
width: 400px;
height: 200px;
border: 2px solid #ddd;
overflow-y: scroll;
margin: 20px auto;
padding: 10px;
transition: background-color 0.3s ease;
}
.long-content {
height: 600px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Scroll-Based Color Change</h1>
<div class="scroll-container" onscroll="changeColor(this)">
<div class="long-content">
<h3>Scrollable Content</h3>
<p>Scroll through this content to see the background color change based on scroll position.</p>
<p>Line 1 of content</p>
<p>Line 2 of content</p>
<p>Line 3 of content</p>
<p>Line 4 of content</p>
<p>Line 5 of content</p>
<p>Line 6 of content</p>
<p>Line 7 of content</p>
<p>Line 8 of content</p>
<p>Line 9 of content</p>
<p>Line 10 of content</p>
</div>
</div>
<p>The container background changes color as you scroll!</p>
<script>
function changeColor(element) {
var scrollPercentage = (element.scrollTop / (element.scrollHeight - element.clientHeight)) * 100;
var hue = scrollPercentage * 3.6; // 0-360 degrees
element.style.backgroundColor = "hsl(" + hue + ", 50%, 90%)";
}
</script>
</body>
</html>
This example changes the background color of the scroll container based on how far the user has scrolled, creating a dynamic visual effect.
Common Use Cases
The onscroll event attribute is commonly used for −
Infinite scrolling − Loading more content when user reaches the bottom
Scroll progress indicators − Showing reading progress on long articles
Parallax effects − Creating depth with background movement
Sticky navigation − Changing navigation appearance on scroll
Lazy loading − Loading images or content as they come into view
Animation triggers − Starting animations when elements become visible
Key Points
The onscroll event fires continuously while scrolling occurs
It can be applied to any scrollable element or the window/body
Performance consideration: Use throttling for heavy operations in scroll handlers
The event provides access to scroll position through
scrollTop,scrollLeft,scrollHeight, andscrollWidthproperties
Conclusion
The HTML onscroll event attribute provides a powerful way to create interactive scroll-based experiences. It responds to user scrolling in real-time, allowing developers to implement dynamic effects, progress tracking, and responsive behaviors based on scroll position within any scrollable HTML element.
265 Views
