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