沃梦达 / 编程技术 / 前端开发 / 正文

JS 实现可停顿的垂直滚动实例代码

前端开发
2024-01-07

下面详细讲解一下“JS 实现可停顿的垂直滚动实例代码”的完整攻略。

下面详细讲解一下“JS 实现可停顿的垂直滚动实例代码”的完整攻略。

前置知识

在学习本文之前，需要有以下一些前置知识：

  • JavaScript 基础知识，包括：变量、函数、循环、条件判断、事件等；
  • HTML/CSS 基础知识，包括：DOM、CSS 样式、布局等；
  • 浏览器相关知识，包括：事件循环、渲染机制等。

实现思路

首先来介绍一下实现思路：

  1. 首先需要获取页面中需要滚动的元素，并计算出滚动的总高度。
  2. 然后需要设置一个定时器，定时将元素滚动一定距离。
  3. 当用户滚动页面、点击停止滚动按钮或者到达元素底部时，需要停止定时器。

接下来详细介绍一下实现步骤。

步骤一：获取需要滚动的元素并计算总高度

使用 document.querySelector 方法获取需要滚动的元素，并使用 element.scrollHeight 属性获取元素的总高度。代码示例：

const el = document.querySelector('#scroll-el');
const totalHeight = el.scrollHeight;

步骤二：设置定时器滚动元素

使用 setInterval 方法设置定时器，每隔一段时间滚动一定距离。具体距离可以根据实际需求进行调整。代码示例：

const scrollStep = 3; // 每次滚动的距离
let scrollTop = 0; // 当前已滚动的高度
let timer = null; // 定时器

function startScroll() {
  timer = setInterval(() => {
    scrollTop += scrollStep;
    el.scrollTop = scrollTop;
    if (scrollTop >= totalHeight) {
      clearInterval(timer);
    }
  }, 30);
}

在上面的代码中，scrollStep 表示每次滚动的距离，scrollTop 表示当前已滚动的高度，timer 表示定时器。startScroll 方法用于启动滚动。

步骤三：停止滚动

当用户滚动页面、点击停止滚动按钮或者到达元素底部时，需要停止定时器。具体实现如下：

// 停止滚动
function stopScroll() {
  clearInterval(timer);
}

// 滚动到底部时停止滚动
el.addEventListener('scroll', () => {
  if (el.scrollTop + el.offsetHeight >= totalHeight) {
    stopScroll();
  }
});

// 点击按钮停止滚动
document.querySelector('#stop-btn').addEventListener('click', stopScroll);

在上面的代码中，stopScroll 方法用于停止滚动。当用户滚动页面时，判断滚动的高度是否已经到达了元素底部，如果是，调用 stopScroll 方法停止滚动；当用户点击停止滚动按钮时，直接调用 stopScroll 方法停止滚动。

示例说明

下面介绍两条示例说明，具体示例代码可查看下方代码附录。

示例一：实现可停顿的垂直滚动

使用上面的方法实现一个可停顿的垂直滚动效果。示例代码如下：

<div id="scroll-el" style="height: 200px; overflow: auto;">
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Consectetur adipisicing elit.</p>
  <!-- 省略 -->
</div>
<button id="stop-btn">停止滚动</button>

const el = document.querySelector('#scroll-el');
const totalHeight = el.scrollHeight;
const scrollStep = 3;
let scrollTop = 0;
let timer = null;

function startScroll() {
  timer = setInterval(() => {
    scrollTop += scrollStep;
    el.scrollTop = scrollTop;
    if (scrollTop >= totalHeight) {
      clearInterval(timer);
    }
  }, 30);
}

function stopScroll() {
  clearInterval(timer);
}

el.addEventListener('scroll', () => {
  if (el.scrollTop + el.offsetHeight >= totalHeight) {
    stopScroll();
  }
});

document.querySelector('#stop-btn').addEventListener('click', stopScroll);

startScroll();

在上面的示例代码中，我们使用了一个可滚动的 div 元素，并添加了一个 button 元素用于停止滚动。运行后页面会自动滚动，当用户点击停止滚动按钮或到达底部时停止滚动。

示例二：实现自动加载更多数据

在实际的项目中，我们经常需要实现自动加载更多数据的功能。下面示例代码演示如何通过滚动实现自动加载更多数据的效果：

<div id="data-container" style="height: 400px; overflow: auto;"></div>

const container = document.querySelector('#data-container');
const scrollStep = 3;
let scrollTop = 0;
let timer = null;

function startScroll() {
  timer = setInterval(() => {
    scrollTop += scrollStep;
    container.scrollTop = scrollTop;
    if (scrollTop + container.offsetHeight >= container.scrollHeight) {
      appendData(); // 加载更多数据
      scrollTo(scrollTop); // 恢复到原始位置
    }
  }, 30);
}

function stopScroll() {
  clearInterval(timer);
}

// 模拟加载数据
function loadData() {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = [];
      for (let i = 0; i < 10; i++) {
        data.push(`Data Item ${i}`);
      }
      resolve(data);
    }, 1000);
  });
}

// 添加数据
async function appendData() {
  const data = await loadData();
  const html = data.map(item => `<p>${item}</p>`).join('');
  container.insertAdjacentHTML('beforeend', html);
}

container.addEventListener('scroll', () => {
  if (scrollTop + container.offsetHeight >= container.scrollHeight) {
    stopScroll();
  }
});

startScroll();

在上面的示例代码中，我们使用了一个可滚动的 div 元素，并通过定时器不断进行滚动。当滚动到底部时，通过模拟异步加载数据的方式，动态添加更多的数据，并通过 insertAdjacentHTML 方法将数据添加至容器中。

代码附录

完整示例代码可查看下方代码附录。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS 实现可停顿的垂直滚动实例代码</title>
</head>
<body>
  <!-- 示例一：实现可停顿的垂直滚动 -->
  <h2>示例一：实现可停顿的垂直滚动</h2>
  <div id="scroll-el" style="height: 200px; overflow: auto;">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Consectetur adipisicing elit.</p>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam.</p>
    <p>Quis nostrud exercitation ullamco laboris nisi.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Consectetur adipisicing elit.</p>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam.</p>
    <p>Quis nostrud exercitation ullamco laboris nisi.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Consectetur adipisicing elit.</p>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam.</p>
    <p>Quis nostrud exercitation ullamco laboris nisi.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Consectetur adipisicing elit.</p>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam.</p>
    <p>Quis nostrud exercitation ullamco laboris nisi.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Consectetur adipisicing elit.</p>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam.</p>
    <p>Quis nostrud exercitation ullamco laboris nisi.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <button id="stop-btn">停止滚动</button>

  <!-- 示例二：实现自动加载更多数据 -->
  <h2>示例二：实现自动加载更多数据</h2>
  <div id="data-container" style="height: 400px; overflow: auto;"></div>

  <script>
    // 示例一
    const el = document.querySelector('#scroll-el');
    const totalHeight = el.scrollHeight;
    const scrollStep = 3;
    let scrollTop = 0;
    let timer = null;

    function startScroll() {
      timer = setInterval(() => {
        scrollTop += scrollStep;
        el.scrollTop = scrollTop;
        if (scrollTop >= totalHeight) {
          clearInterval(timer);
        }
      }, 30);
    }

    function stopScroll() {
      clearInterval(timer);
    }

    el.addEventListener('scroll', () => {
      if (el.scrollTop + el.offsetHeight >= totalHeight) {
        stopScroll();
      }
    });

    document.querySelector('#stop-btn').addEventListener('click', stopScroll);

    startScroll();

    // 示例二
    const container = document.querySelector('#data-container');
    let scrollTop = 0;
    let timer = null;

    function startScroll() {
      timer = setInterval(() => {
        scrollTop += scrollStep;
        container.scrollTop = scrollTop;
        if (scrollTop + container.offsetHeight >= container.scrollHeight) {
          appendData();
          scrollTo(scrollTop);
        }
      }, 30);
    }

    function stopScroll() {
      clearInterval(timer);
    }

    function loadData() {
      return new Promise(resolve => {
        setTimeout(() => {
          const data = [];
          for (let i = 0; i < 10; i++) {
            data.push(`Data Item ${i}`);
          }
          resolve(data);
        }, 1000);
      });
    }

    async function appendData() {
      const data = await loadData();
      const html = data.map(item => `<p>${item}</p>`).join('');
      container.insertAdjacentHTML('beforeend', html);
    }

    container.addEventListener('scroll', () => {
      if (scrollTop + container.offsetHeight >= container.scrollHeight) {
        stopScroll();
      }
    });

    startScroll();
  </script>
</body>
</html>

以上就是“JS 实现可停顿的垂直滚动实例代码”的完整攻略，希望对你有所帮助！

本文标题为：JS 实现可停顿的垂直滚动实例代码

上一篇： 手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
下一篇： 详解iframe跨域的几种常用方法(小结)

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2