For this, use the concept of scrollTop and scrollHeight.
Example
<!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 −
