Set scroll view with intervals in JavaScript

JavascriptWeb DevelopmentObject Oriented Programming

For this, use the concept of scrollTop and scrollHeight.

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
   #scrollDemo {
      height: 300px;
      overflow-y: scroll;
   }
   #scrollDataFeatures {
      height: 500px;
      background-color: skyblue;
   }
</style>
</head>
<body>
<div id="scrollDemo">
<div id="scrollDataFeatures"></div>
<h3>See the below Message and Scroll UP</h3>
</div>
<script>
   var scrollData = document.getElementById("scrollDemo");
   scrollData.scrollTop = scrollData.scrollHeight
   setInterval(() =>{
      var heading3Data = document.createElement("h3");
      heading3Data.innerHTML = "Scroll Down...Please Scroll UP"
      scrollData.appendChild(heading3Data);
      scrollData.scrollTop = scrollData.scrollHeight
   }, 30*1000)
</script>
</body>
</html>

To run the above program, save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VSCode Editor.

Output

This will produce the following output: Initially you will get the following output −

In every 30 seconds (30s), you will get the message like this −

Scroll Down...Please Scroll UP.

Output

This will produce the following output −

raja
Published on 14-Sep-2020 08:16:18
Advertisements