इसके लिए स्क्रॉलटॉप और स्क्रॉलहाइट की अवधारणा का उपयोग करें।
उदाहरण
<!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> उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम anyName.html(index.html) को सेव करें और फ़ाइल पर राइट क्लिक करें और VSCode Editor में लाइव सर्वर के साथ खुले विकल्प का चयन करें।
आउटपुट
यह निम्न आउटपुट उत्पन्न करेगा:प्रारंभ में आपको निम्न आउटपुट प्राप्त होगा -
हर 30 सेकंड (30 सेकेंड) में आपको इस तरह का मैसेज मिलेगा -
Scroll Down...Please Scroll UP.
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
