Đối với điều này, hãy sử dụng khái niệm scrollTop và scrollHeight.
Ví dụ
<!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> Để chạy chương trình trên, hãy lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp và chọn tùy chọn mở bằng máy chủ trực tiếp trong VSCode Editor.
Đầu ra
Điều này sẽ tạo ra kết quả sau:Ban đầu, bạn sẽ nhận được kết quả sau -
Sau mỗi 30 giây (30 giây), bạn sẽ nhận được thông báo như thế này -
Scroll Down...Please Scroll UP.
Đầu ra
Điều này sẽ tạo ra kết quả sau -
