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 中自动滚动