JavaScript 實現自動滾動
Anika Tabassum Era
2022年7月12日
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>
  On page load the scrolling of the page will be enabled. <br>
  When pressed enter, the scroll will be halt. <br>
  And when pressed again it will scroll. <br>
  When the scroll meets the end of page, the scrolling function will stop. <br>
  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);
輸出:
可以看出,頁面在到達頁面末尾時停止滾動。並且當再次手動滾動到頂部時,可以再次播放滾動條。
因此,可以實現自動滾動行為。
Author: Anika Tabassum Era