快捷導(dǎo)航

使用JavaScript實(shí)現(xiàn)絲滑文字滾動(dòng)詳細(xì)代碼

更新時(shí)間：2026年05月22日 08:26:23 作者：技術(shù)喵貓巷

在網(wǎng)頁開發(fā)中,增強(qiáng)用戶體驗(yàn)是非常重要的一個(gè)部分,想象一下如果你的網(wǎng)頁標(biāo)題欄能夠展示動(dòng)態(tài)的、滾動(dòng)的文本,這將會(huì)吸引訪客的目光并增加其興趣,這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)絲滑文字滾動(dòng)的相關(guān)資料,需要的朋友可以參考下

前言

公告欄、彈幕、股票 ticker……垂直文字滾動(dòng)是前端最常見的動(dòng)效之一。本文用純?cè)a拆解一條「克隆 + 逐幀滾動(dòng)」的實(shí)現(xiàn)思路，涵蓋布局、滾動(dòng)、邊界銜接三大要點(diǎn)，開箱即用，零依賴零配置。

效果預(yù)覽

一、布局：一行標(biāo)題 + 一條列表

HTML 極簡骨架：

<div class="container">
  <h1 class="title">最新公告</h1>
  <ul class="list">
    <li>把大象裝冰箱總共分幾步？</li>
    <li>1. 鄧哥打開冰箱門</li>
    <li>2. 鄧哥把大象放進(jìn)去</li>
    <li>3. 鄧哥關(guān)上冰箱門</li>
  </ul>
</div>

CSS 只做兩件事：

.container 負(fù)責(zé)背景色與水平排版
.list 固定高度并隱藏溢出內(nèi)容，為滾動(dòng)做準(zhǔn)備

二、核心算法：克隆 + 逐幀滾動(dòng)

1.克隆首項(xiàng) —— 無縫銜接的秘訣

當(dāng)最后一項(xiàng)滾動(dòng)到可視區(qū)后，必須立即回到第一項(xiàng)而不閃屏。最簡單做法：把第一項(xiàng)克隆一份追加到列表末尾。這樣「最后一項(xiàng)」和「第一項(xiàng)」之間永遠(yuǎn)有一條平滑過渡。

const list = document.querySelector('.list');
const firstItem = list.children[0].cloneNode(true);
list.appendChild(firstItem);

2.逐幀滾動(dòng) —— 手寫 Easing

瀏覽器原生 scrollTop 沒有動(dòng)畫，我們用 setInterval 在 300 ms 內(nèi)完成一次 30 px 的位移動(dòng)畫：

let curIndex = 0;
const itemHeight = 30;
const duration = 300; // 動(dòng)畫耗時(shí)
const interval = 10;  // 每幀間隔
const dis = itemHeight / (duration / interval);

function moveNext() {
  let from = curIndex * itemHeight;
  let to = (curIndex + 1) * itemHeight;
  let timer = setInterval(() => {
    from += dis;
    if (from >= to) {
      clearInterval(timer);
      curIndex++;
      // 到達(dá)克隆項(xiàng)時(shí)瞬間歸零，形成無縫循環(huán)
      if (curIndex === list.children.length - 1) {
        curIndex = 0;
        list.scrollTop = 0;
      }
    } else {
      list.scrollTop = from;
    }
  }, interval);
}

三、邊界處理：回到起點(diǎn)不閃屏

當(dāng) curIndex 等于克隆項(xiàng)索引時(shí)，立即把 scrollTop 設(shè)為 0，人眼幾乎察覺不到跳變，從而形成無限循環(huán)。

四、一行命令替換內(nèi)容

只要保持每條文本高度一致，替換 <ul> 的 innerHTML 即可熱插播新公告，無需重啟動(dòng)畫邏輯。

總結(jié)

「克隆第一項(xiàng) + 逐幀滾動(dòng)」是公告欄場景下最輕量的無限循環(huán)方案，可讓文字像膠片一樣永遠(yuǎn)滾動(dòng)，不閃、不抖、不掉幀。

到此這篇關(guān)于使用JavaScript實(shí)現(xiàn)絲滑文字滾動(dòng)詳細(xì)代碼的文章就介紹到這了,更多相關(guān)JS絲滑文字滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: