HTML实现区域循环滚动效果

发表于 | 分类于
HTML实现区域循环滚动效果

前言

在HTML中实现列表循环滚动效果，通常可以通过CSS动画或JavaScript来实现。

以下是几种常见的实现方式，适用于不同场景：

方法1：纯CSS实现

利用CSS的animation和transform属性，通过 translateY 实现滚动，并配合infinite属性实现循环。

垂直循环滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .scroll-container {
      width: 300px;
      height: 200px;
      overflow: hidden; /* 隐藏超出容器的内容 */
      border: 1px solid #ccc;
    }
    .scroll-list {
      list-style: none;
      margin: 0;
      padding: 0;
      animation: scroll 10s linear infinite; /* 10秒完成一次滚动，匀速循环 */
    }
    .scroll-list li {
      padding: 10px;
      background: #f5f5f5;
      margin-bottom: 5px;
    }
    /* 定义滚动动画 */
    @keyframes scroll {
      0% {
        transform: translateY(0); /* 初始位置 */
      }
      100% {
        transform: translateY(-50%); /* 滚动到自身高度的一半（需保证列表重复） */
      }
    }
    /* 鼠标悬停暂停滚动 */
    .scroll-container:hover .scroll-list {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <ul class="scroll-list">
      <!-- 为了实现无缝循环，列表需要重复一份 -->
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
      <li>列表项 4</li>
      <li>列表项 5</li>
      <!-- 重复列表项以实现无缝衔接 -->
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
      <li>列表项 4</li>
      <li>列表项 5</li>
    </ul>
  </div>
</body>
</html>

原理：通过复制一份列表项，当第一份滚动完时，第二份刚好衔接，形成无缝循环。

横向循环滚动

将上述方法的translateY改为translateX，即可实现横向滚动：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 横向滚动的CSS调整 */
.scroll-container {
  height: 60px; /* 只需要容纳一行的高度 */
  white-space: nowrap; /* 禁止列表项换行 */
}
.scroll-list li {
  display: inline-block; /* 横向排列 */
  margin-right: 20px;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

方法2：JavaScript实现

通过JS动态修改列表的位置，支持暂停、速度调整等功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .scroll-container {
      width: 300px;
      height: 200px;
      overflow: hidden;
      border: 1px solid #ccc;
      position: relative;
    }
    .scroll-list {
      list-style: none;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .scroll-list li {
      padding: 10px;
      background: #f5f5f5;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div class="scroll-container" id="container">
    <ul class="scroll-list" id="list">
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
      <li>列表项 4</li>
      <li>列表项 5</li>
    </ul>
  </div>

  <script>
    const container = document.getElementById('container');
    const list = document.getElementById('list');
    let speed = 2; // 滚动速度（像素/帧）
    let timer = null;
    let position = 0; // 当前滚动位置

    // 复制列表项用于循环
    const cloneList = list.innerHTML;
    list.innerHTML += cloneList;

    // 滚动函数
    function scroll() {
      position += speed;
      // 当滚动距离超过原列表高度时，重置位置（实现循环）
      if (position >= list.offsetHeight / 2) {
        position = 0;
      }
      list.style.transform = `translateY(-${position}px)`;
      timer = requestAnimationFrame(scroll);
    }

    // 开始滚动
    scroll();

    // 鼠标悬停暂停
    container.addEventListener('mouseenter', () => {
      cancelAnimationFrame(timer);
    });

    // 鼠标离开继续
    container.addEventListener('mouseleave', () => {
      scroll();
    });
  </script>
</body>
</html>

优势：可以通过修改speed变量调整滚动速度，且支持更复杂的交互逻辑。

关键注意事项

  1. 无缝循环的核心是列表项重复（复制一份原列表），确保滚动衔接时无断层。
  2. 滚动速度需根据列表长度调整，避免过快或过慢。
  3. 鼠标悬停暂停是友好的交互体验，建议添加。

根据需求选择合适的方法：纯CSS适合简单场景，JS适合需要动态控制的场景。