实现列表滚动效果

在 Web 应用中，列表滚动效果是一个常见的交互需求。通过 JavaScript，可以实现平滑的列表滚动、自动滚动以及各种自定义的滚动行为。

实现代码

/**
 * 实现列表滚动效果的工具类
 */
class ScrollList {
  constructor(options) {
    // 列表容器
    this.container = document.querySelector(options.container);
    // 滚动速度（单位：像素/毫秒）
    this.speed = options.speed || 30;
    // 滚动延迟时间（单位：毫秒）
    this.delay = options.delay || 3000;
    // 滚动方向
    this.direction = options.direction || "up"; // 'up' 或 'down'
    // 是否自动滚动
    this.isAutoScroll = options.autoScroll !== false;
    this.isPaused = false;
    this.timer = null;

    this.init();
  }

  init() {
    this.cloneContent();
    if (this.isAutoScroll) {
      this.startAutoScroll();
    }
    this.addEvents();
  }

  cloneContent() {
    const content = this.container.innerHTML;
    this.container.innerHTML += content;
  }

  scroll() {
    if (this.isPaused) return;

    const scrollDistance = 1;
    const containerHeight = this.container.clientHeight;
    const contentHeight = this.container.scrollHeight;

    if (this.direction === "up") {
      if (this.container.scrollTop >= contentHeight / 2) {
        this.container.scrollTop = 0;
      } else {
        this.container.scrollTop += scrollDistance;
      }
    } else {
      if (this.container.scrollTop <= 0) {
        this.container.scrollTop = contentHeight / 2;
      } else {
        this.container.scrollTop -= scrollDistance;
      }
    }
  }

  startAutoScroll() {
    this.stopAutoScroll();
    this.timer = setInterval(() => {
      this.scroll();
    }, this.speed);
  }

  stopAutoScroll() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }

  pause() {
    this.isPaused = true;
  }

  resume() {
    this.isPaused = false;
  }

  scrollToItem(index) {
    const items = this.container.children;
    if (items[index]) {
      this.container.scrollTop = items[index].offsetTop;
    }
  }

  addEvents() {
    // 鼠标悬停暂停自动滚动
    this.container.addEventListener("mouseenter", () => {
      this.pause();
    });

    this.container.addEventListener("mouseleave", () => {
      this.resume();
    });
  }

  destroy() {
    this.stopAutoScroll();
    this.container.removeEventListener("mouseenter", this.pause);
    this.container.removeEventListener("mouseleave", this.resume);
  }
}

// 平滑滚动到顶部的函数
function smoothScrollToTop(container, duration = 500) {
  const start = container.scrollTop;
  const startTime = Date.now();

  function scroll() {
    const currentTime = Date.now();
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easeOutQuad = 1 - (1 - progress) * (1 - progress);

    container.scrollTop = start * (1 - easeOutQuad);

    if (progress < 1) {
      requestAnimationFrame(scroll);
    }
  }

  requestAnimationFrame(scroll);
}

// 平滑滚动到底部的函数
function smoothScrollToBottom(container, duration = 500) {
  const start = container.scrollTop;
  const end = container.scrollHeight - container.clientHeight;
  const startTime = Date.now();

  function scroll() {
    const currentTime = Date.now();
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easeOutQuad = 1 - (1 - progress) * (1 - progress);

    container.scrollTop = start + (end - start) * easeOutQuad;

    if (progress < 1) {
      requestAnimationFrame(scroll);
    }
  }

  requestAnimationFrame(scroll);
}

代码解析

ScrollList 类的核心功能

1. 构造函数

   • 接收配置参数，包括容器选择器、滚动速度、延迟时间、滚动方向和是否自动滚动
   • 初始化相关属性和状态

2. 克隆内容

   • 通过 cloneContent() 方法复制容器内的内容，实现无缝滚动效果
   • 当滚动到复制内容的位置时，会瞬间回到原始位置，造成视觉上的连续滚动

3. 滚动逻辑

   • scroll() 方法实现实际的滚动操作，根据方向向上或向下滚动
   • 通过判断滚动位置，实现内容的循环滚动

4. 自动滚动控制

   • startAutoScroll() 和 stopAutoScroll() 方法控制自动滚动的开始和停止
   • 使用 setInterval 设置定时滚动

5. 交互控制

   • pause() 和 resume() 方法用于暂停和恢复滚动
   • scrollToItem() 方法可以滚动到指定索引的项目

6. 事件监听

   • 添加鼠标悬停和离开事件，实现鼠标悬停时暂停滚动，离开时恢复滚动

平滑滚动函数

1. smoothScrollToTop

   • 实现平滑滚动到容器顶部的效果
   • 使用 requestAnimationFrame 和缓动函数实现平滑过渡
   • 支持自定义滚动持续时间

2. smoothScrollToBottom

   • 实现平滑滚动到容器底部的效果
   • 原理与平滑滚动到顶部相同，但方向相反

使用方法

基本使用

1. HTML 结构

首先需要准备 HTML 结构，包含一个具有固定高度和滚动样式的容器：

<div id="scrollContainer" style="height: 300px; overflow: hidden;">
  <div class="scroll-item">项目 1</div>
  <div class="scroll-item">项目 2</div>
  <div class="scroll-item">项目 3</div>
  <!-- 更多... -->
</div>

2. 初始化 ScrollList

// 基本配置
const scrollList = new ScrollList({
  container: "#scrollContainer",
  speed: 20, // 滚动速度（毫秒）
  delay: 2000, // 滚动延迟（毫秒）
  direction: "up", // 滚动方向（'up' 或 'down'）
  autoScroll: true, // 是否自动滚动
});

高级操作

// 暂停滚动
scrollList.pause();

// 恢复滚动
scrollList.resume();

// 滚动到指定索引的项目
scrollList.scrollToItem(5);

// 平滑滚动到顶部
smoothScrollToTop(document.getElementById("scrollContainer"), 1000);

// 平滑滚动到底部
smoothScrollToBottom(document.getElementById("scrollContainer"), 1000);

// 销毁实例，清理事件监听
scrollList.destroy();

应用场景

1. 新闻公告栏

在网站顶部或侧边栏显示最新公告，通过自动滚动效果吸引用户注意，同时支持手动暂停查看详情。

// 新闻公告栏配置
const newsTicker = new ScrollList({
  container: "#newsTicker",
  speed: 30,
  direction: "up",
  autoScroll: true,
});

2. 商品推荐列表

在电商网站中，实现热门商品或推荐商品的自动滚动展示，提升用户浏览体验和商品曝光率。

3. 聊天记录滚动

在聊天应用中，使用平滑滚动函数实现消息列表的滚动加载和定位到最新消息的效果。

// 新消息到达时平滑滚动到底部
function onNewMessage() {
  const chatContainer = document.getElementById("chatContainer");
  smoothScrollToBottom(chatContainer, 300);
}

4. 图片轮播

结合 CSS 样式，可以实现垂直方向的图片轮播效果，适用于产品展示、相册浏览等场景。

5. 数据可视化滚动展示

在数据看板或监控系统中，实现指标数据的滚动展示，便于用户快速浏览大量数据。