JavaScript 實現自動滾動

Anika Tabassum Era 2024年2月15日

JavaScript JavaScript Scroll

JavaScript 確保了更好的 UI 體驗，並且具有廣泛的方法。在我們設定頁面自動滾動的問題中，我們將檢查一些可以組合並製作很酷的 UI 的功能。

這裡的基本任務是我們將在每次頁面載入時自動滾動我們的網頁。此外，當在滾動時按下 Enter 時，頁面將停止。

再次按下 Enter 後，頁面將開始滾動。讓我們跳到程式碼，嘗試理解程式碼流。

使用 `scrollBy()` 和 `setInterval()` 在 JavaScript 中自動滾動

在演示中，我們將擁有比視口更大的 UI。主要任務是用 JavaScript 實現的。

我們已經初始化了 2 個函式（startScroll 和 stopScroll）。startScroll() 函式將在每次按下 Enter 時啟用滾動。

當檢測到 Enter 按下時，stopScroll() 將被啟用。

startScroll 函式具有 setInterval() 和 scrollBy() 方法。我們將合併這兩種方法。

通過方法 scrollBy()，我們將設定我們期望的滾動型別。我們的程式碼將水平滾動設定為 0，垂直滾動設定為 2 單位。

這是一種向下滾動的靜態方式，你不會看到滾動發生。頁面將在滾動部分之後跳轉並顯示給你。

因此，我們將時間間隔設定為 10 毫秒；因此，頁面在視覺上會下降。在 stopScroll() 函式中，我們將通過檢查當前頁面位置的例項來清除間隔。

我們還將使用 Enter 進行條件語句以確保播放暫停。讓我們檢查一下程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="one" style="height: 250px; background:pink">
    <br>
    &nbsp On page load the scrolling of the page will be enabled. <br>
    &nbsp When pressed enter, the scroll will be halt. <br>
    &nbsp And when pressed again it will scroll. <br>
    &nbsp When the scroll meets the end of page, the scrolling function will stop. <br>
    &nbsp And you can manually scroll up. An when needed press enter again to scroll to down. <br>
  </div>
  <div id="one" style="height: 250px; background:purple"></div>
  <div id="one" style="height: 250px; background:cyan"></div>
  <div id="one" style="height: 250px; background:lightgreen"></div>
</body>
</html>

let scrollerID;
let paused = true;
let interval = 10;

function startScroll() {
  let id = setInterval(function() {
    window.scrollBy(0, 2);
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      // end of page?
      stopScroll();
    }
  }, interval);
  return id;
}

function stopScroll() {
  clearInterval(scrollerID);
}
document.body.addEventListener('keypress', function(event) {
  if (event.which == 13 || event.keyCode == 13) {
    // 'Enter' key
    if (paused == true) {
      scrollerID = startScroll();
      paused = false;
    } else {
      stopScroll();
      paused = true;
    }
  }
}, true);

輸出：

使用 scrollBy() 和 setInterval() 來自動滾動

可以看出，頁面在到達頁面末尾時停止滾動。並且當再次手動滾動到頂部時，可以再次播放滾動條。

因此，可以實現自動滾動行為。

作者： Anika Tabassum Era

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

使用 scrollBy() 和 setInterval() 在 JavaScript 中自動滾動

相關文章 - JavaScript Scroll

使用 `scrollBy()` 和 `setInterval()` 在 JavaScript 中自動滾動