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