快捷導(dǎo)航

前端實(shí)現(xiàn)列表無縫自動(dòng)滾動(dòng)效果實(shí)例代碼(div列表+table表格)

更新時(shí)間：2026年02月02日 09:07:09 作者：被妖怪抓走的師傅

這篇文章主要介紹了前端實(shí)現(xiàn)列表無縫自動(dòng)滾動(dòng)效果(div列表+table表格)的兩種方法,一種是使用CSS和JavaScript結(jié)合,通過渲染兩次列表并使用@keyframes實(shí)現(xiàn)平滑滾動(dòng),另一種是針對(duì)表格滾動(dòng),通過復(fù)制表格內(nèi)容并使用CSS屬性實(shí)現(xiàn)無縫滾動(dòng),需要的朋友可以參考下

一、div列表滾動(dòng)

現(xiàn)在需要實(shí)現(xiàn)一個(gè)效果，內(nèi)容無限、平滑、無閃動(dòng)地向上滾動(dòng)；當(dāng)鼠標(biāo)懸停到列表時(shí)，滾動(dòng)暫停并高亮當(dāng)前項(xiàng)；鼠標(biāo)移出后繼續(xù)滾動(dòng)。這是在大屏項(xiàng)目中經(jīng)常見到的一種展示數(shù)據(jù)的方式，本文為具體的實(shí)現(xiàn)方式。

實(shí)現(xiàn)原理：

在使用了js控制之后發(fā)現(xiàn)有閃動(dòng)的現(xiàn)象，然后就換了種方式，我的想法是：把原始列表渲染兩次（A + A），用 CSS @keyframes 把整個(gè)雙倍內(nèi)容從 translateY(0) 平滑移動(dòng)到 translateY(-50%)（即移動(dòng)一份內(nèi)容的高度），動(dòng)畫無限循環(huán)。因?yàn)橄掳氩糠质巧习氩糠值膹?fù)制，循環(huán)在視覺上是連續(xù)的、無斷點(diǎn)的——沒有 JS 在中間做“重置”，因此無閃動(dòng)。話不多說直接上代碼
html：

<template>
  <div class="scroll-list" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
    <div class="scroll-content" ref="scrollContent">
      <div
        v-for="item in typicalCaseList"
        :key="'a' + item.id"
        class="scroll-item"
      >
        <span>{{ item.text }}</span>
      </div>
      <!-- 復(fù)制一份 -->
      <div
        v-for="item in typicalCaseList"
        :key="'b' + item.id"
        class="scroll-item"
      >
        <span>{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>

當(dāng)上半段滾出視窗時(shí)，下半段的內(nèi)容正好銜接上，使得動(dòng)畫循環(huán)時(shí)不會(huì)出現(xiàn)斷裂。注意 key 的不同，避免 Vue 復(fù)用 DOM 導(dǎo)致復(fù)制失敗
js：

<script>
export default {
  data() {
    return {
      typicalCaseList: [
        // ... 你的數(shù)據(jù)
      ]
    };
  },
  mounted() {
    const list = this.$refs.scrollContent;
    // 根據(jù)列表長(zhǎng)度動(dòng)態(tài)設(shè)置動(dòng)畫時(shí)長(zhǎng)（可按需調(diào)整策略）
    const itemCount = this.typicalCaseList.length;
    const duration = Math.max(8, itemCount * 0.8); // 秒，示例：最少 8s
    list.style.setProperty('--duration', `${duration}s`);
  },
  methods: {
    pauseScroll() {
      this.$refs.scrollContent.style.animationPlayState = 'paused';
    },
    resumeScroll() {
      this.$refs.scrollContent.style.animationPlayState = 'running';
    }
  }
};
</script>

@mouseenter / @mouseleave 控制動(dòng)畫的播放狀態(tài)，零延遲暫停/恢復(fù)

css:

<style scoped>
.scroll-list {
  height: 228px;
  margin: 0px 8px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  display: flex;
  flex-direction: column;
  animation: scroll-up var(--duration) linear infinite;
}

.scroll-item {
  height: 43px;
  font-size: 16px;
  color: #D0DEEE;
  padding: 0 10px;
  transition: all 0.3s;
  border-bottom: 1px dashed rgba(69,174,253,0.43);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.scroll-item:hover {
  color: #03A7FA;
}

/* 真正無縫滾動(dòng)動(dòng)畫 */
@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
</style>

translateY(-50%)：把整個(gè)容器往上移 50%（即整份內(nèi)容的一半），正好把第一份內(nèi)容滾出，顯示第二份（與第一份相同），循環(huán)接著第一份。他之所以能解決閃爍的原因是因?yàn)閯?dòng)畫是連續(xù)的無限循環(huán)，瀏覽器合成層平滑過渡，動(dòng)畫結(jié)束后 CSS 自動(dòng)從 0% 開始新一輪，但因?yàn)楫嬅鎯?nèi)容與起始狀態(tài)一致，用戶看不到跳變（沒有 JS 重置 scrollTop 的那一幀）

拓展：

還可以根據(jù)需求進(jìn)行一些部分的拓展，比如

動(dòng)態(tài)速度或者是時(shí)長(zhǎng)更精確的計(jì)算
通過計(jì)算單個(gè).scroll-item的高度，計(jì)算原始列表總高度來獲取更準(zhǔn)確的值

const itemHeight = this.$refs.scrollContent.querySelector('.scroll-item').offsetHeight;
const H = itemHeight * this.typicalCaseList.length;
const speed = 30; // px/s
const duration = H / speed;
this.$refs.scrollContent.style.setProperty('--duration', `${duration}s`);

只在數(shù)據(jù)高度超出容器時(shí)啟用滾動(dòng)
如果列表很短（內(nèi)容總高度 <= 你設(shè)定的總高度），不需要滾動(dòng)。判斷邏輯：

if (content.scrollHeight <= container.clientHeight) {
  // 不啟用動(dòng)畫：移除 animation
  content.style.animation = 'none';
} else {
  content.style.animation = `scroll-up var(--duration) linear infinite`;
}

二、table表格滾動(dòng)

table表格的滾動(dòng)主要是實(shí)現(xiàn)思路為復(fù)制一個(gè)表格內(nèi)容，讓其形成無縫滾動(dòng)的感覺，結(jié)合css實(shí)現(xiàn)效果

<div class="table-scroll-wrapper">
  <table class="table-box-right">
    <thead>
      <tr>
        <th>姓名</th>
        <th>城市</th>
        <th>年齡</th>
      </tr>
    </thead>
  </table>

  <div class="table-body-wrapper">
    <table class="table-box-right scroll-content">
      <!-- 可以通過判斷來實(shí)現(xiàn)達(dá)到多少條數(shù)據(jù)時(shí)，觸發(fā)滾動(dòng)動(dòng)畫 -->
      <tbody :class="{ scrollable: tableData.length > 5 }">
        <!-- 克隆兩次實(shí)現(xiàn)無縫滾動(dòng) -->
        <tr v-for="item in tableData" :key="item.f_id">
          <td>{{ item.name }}</td>
          <td>{{ item.city }}</td>
          <td>{{ item.age }}</td>
        </tr>
        <tr v-for="item in tableData" :key="'clone-' + item.f_id">
          <td>{{ item.name }}</td>
          <td>{{ item.city }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

css部分實(shí)現(xiàn)滾動(dòng)

.table-scroll-wrapper {
    width: 100%;
    color: #fff;
    padding: 20px;
}

.table-box-right {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.table-box-right th,
.table-box-right td {
    border: 1px solid #0058af;
    text-align: center;
    padding: 6px 8px;
    font-size: 14px;
}

/* 固定表頭 */
.table-box-right thead th {
    background: #103e5f;
    position: sticky;
    top: 0;
    z-index: 2;
    color: #37eef4;
}
.table-box-right td {
    background: #01204c;
}

/* 滾動(dòng)容器 */
.table-body-wrapper {
    max-height: 200px;
    overflow: hidden;
    position: relative;
}

.scroll-content tr {
    display: table; /* 保持表格樣式 */
    width: 100%;
    table-layout: fixed;
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } /* 移動(dòng)一半，實(shí)現(xiàn)無縫滾動(dòng) */
}

.scroll-content tbody.scrollable {
    display: block; 
    animation: scrollUp 15s linear infinite; // 控制滾動(dòng)速度 數(shù)值越大滾動(dòng)越慢
}

.table-body-wrapper:hover .scroll-content tbody.scrollable {
    animation-play-state: paused;
}

/* 小于X條的 tbody 不加動(dòng)畫，默認(rèn)不滾動(dòng) */
.scroll-content tbody:not(.scrollable) {
    display: table-row-group; /* 保持正常表格布局 */
    animation: none;
}

上述是通過純css樣式控制當(dāng)數(shù)據(jù)大于你規(guī)定的條數(shù)時(shí)，表格開始滾動(dòng)，鼠標(biāo)劃入停止動(dòng)畫，離開繼續(xù)動(dòng)畫，控制css屬性這樣就能簡(jiǎn)單的實(shí)現(xiàn)無縫滾動(dòng)效果

總結(jié)

到此這篇關(guān)于前端實(shí)現(xiàn)列表無縫自動(dòng)滾動(dòng)效果(div列表+table表格)的文章就介紹到這了,更多相關(guān)前端列表無縫自動(dòng)滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: