Set scroll view with intervals in JavaScript


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 −

Updated on: 14-Sep-2020

510 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements