迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 实现自动滚动

作者:迹忆客 最近更新:2024/03/18 浏览次数:

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);

输出:

可以看出,页面在到达页面末尾时停止滚动。并且当再次手动滚动到顶部时,可以再次播放滚动条。

因此,可以实现自动滚动行为。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便