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
Set scroll view with intervals in JavaScript
Setting a scroll view with intervals in JavaScript allows you to automatically scroll content and add new elements at regular time intervals. This technique uses scrollTop and scrollHeight properties along with setInterval().
Key Properties
The main properties for controlling scroll behavior are:
-
scrollTop- Gets or sets the number of pixels scrolled from the top -
scrollHeight- Returns the total height of scrollable content
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Scroll with Intervals</title>
<style>
#scrollDemo {
height: 300px;
width: 500px;
overflow-y: scroll;
border: 2px solid #ccc;
padding: 10px;
margin: 20px auto;
}
#scrollDataFeatures {
height: 400px;
background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
margin-bottom: 20px;
border-radius: 5px;
}
h3 {
background-color: #FFE4B5;
padding: 10px;
margin: 10px 0;
border-radius: 3px;
text-align: center;
}
</style>
</head>
<body>
<div id="scrollDemo">
<div id="scrollDataFeatures"></div>
<h3>Initial Message - Scroll UP to see new content</h3>
</div>
<script>
var scrollData = document.getElementById("scrollDemo");
// Initially scroll to bottom
scrollData.scrollTop = scrollData.scrollHeight;
// Add new content every 5 seconds and auto-scroll to bottom
setInterval(() => {
var heading3Data = document.createElement("h3");
var currentTime = new Date().toLocaleTimeString();
heading3Data.innerHTML = "New message added at " + currentTime + " - Please Scroll UP";
scrollData.appendChild(heading3Data);
// Auto-scroll to show new content
scrollData.scrollTop = scrollData.scrollHeight;
}, 5000); // 5 seconds interval
</script>
</body>
</html>
How It Works
The script follows these steps:
- Get reference to the scrollable container using
getElementById() - Set initial scroll position to bottom with
scrollTop = scrollHeight - Use
setInterval()to execute a function every 5 seconds - Create new content dynamically and append it to the container
- Update scroll position to show the newly added content
Output
Initially, you will see a scrollable container with the first message at the bottom:
Initial Message - Scroll UP to see new content
Every 5 seconds, new messages will be added with timestamps:
New message added at 2:30:15 PM - Please Scroll UP New message added at 2:30:20 PM - Please Scroll UP New message added at 2:30:25 PM - Please Scroll UP
Common Use Cases
- Chat applications with auto-scrolling
- Live data feeds and notifications
- Real-time log viewers
- Social media timeline updates
Conclusion
Setting scroll views with intervals combines DOM manipulation, timer functions, and scroll properties to create dynamic, auto-updating interfaces. This technique is essential for building real-time applications that need to display new content automatically.
Updated on: 2026-03-15T23:18:59+05:30
769 Views
Advertisements