JavaScript 實現自動滾動

Anika Tabassum Era 2022年7月12日
JavaScript 實現自動滾動

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

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

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

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

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

我們已經初始化了 2 個函式(startScrollstopScroll)。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 avatar Anika Tabassum Era avatar

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 GitHub Facebook

相關文章 - JavaScript Scroll