Đặt cuộn xem với khoảng thời gian trong JavaScript

Để làm đ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, initial-scale=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>Xem thông báo dưới đây và Cuộn Lên</h3>
</div>
<script>
  var scrollData = document.getElementById("scrollDemo");
  scrollData.scrollTop = scrollData.scrollHeight
  setInterval(() => {
    var heading3Data = document.createElement("h3");
    heading3Data.innerHTML = "Cuộn Xuống...Vui Lòng Cuộn Lên"
    scrollData.appendChild(heading3Data);
    scrollData.scrollTop = scrollData.scrollHeight
  }, 30 * 1000)
</script>
</body>
</html>

Để chạy chương trình trên, 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 open with live server trong trình soạn thảo VSCode.

Kết quả

Chương trình sẽ cho ra kết quả sau: Ban đầu bạn sẽ nhận được kết quả sau:

Mỗi 30 giây (30s), bạn sẽ nhận được thông báo như sau:

Cuộn Xuống...Vui Lòng Cuộn Lên.

Kết quả

Chương trình sẽ cho ra kết quả sau: