使用JavaScript實現(xiàn)絲滑文字滾動詳細代碼
前言
公告欄、彈幕、股票 ticker……垂直文字滾動是前端最常見的動效之一。本文用純原生代碼拆解一條「克隆 + 逐幀滾動」的實現(xiàn)思路，涵蓋布局、滾動、邊界銜接三大要點，開箱即用，零依賴零配置。
效果預(yù)覽
一、布局：一行標(biāo)題 + 一條列表
HTML 極簡骨架：
<div class="container">
<h1 class="title">最新公告</h1>
<ul class="list">
<li>把大象裝冰箱總共分幾步？</li>
<li>1. 鄧哥打開冰箱門</li>
<li>2. 鄧哥把大象放進去</li>
<li>3. 鄧哥關(guān)上冰箱門</li>
</ul>
</div>CSS 只做兩件事：
.container負責(zé)背景色與水平排版.list固定高度并隱藏溢出內(nèi)容，為滾動做準備
二、核心算法：克隆 + 逐幀滾動
1.克隆首項 —— 無縫銜接的秘訣
當(dāng)最后一項滾動到可視區(qū)后，必須立即回到第一項而不閃屏。最簡單做法：把第一項克隆一份追加到列表末尾。這樣「最后一項」和「第一項」之間永遠有一條平滑過渡。
const list = document.querySelector('.list');
const firstItem = list.children[0].cloneNode(true);
list.appendChild(firstItem);
2.逐幀滾動 —— 手寫 Easing
瀏覽器原生 scrollTop 沒有動畫，我們用 setInterval 在 300 ms 內(nèi)完成一次 30 px 的位移動畫：
let curIndex = 0;
const itemHeight = 30;
const duration = 300; // 動畫耗時
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++;
// 到達克隆項時瞬間歸零，形成無縫循環(huán)
if (curIndex === list.children.length - 1) {
curIndex = 0;
list.scrollTop = 0;
}
} else {
list.scrollTop = from;
}
}, interval);
}
三、邊界處理：回到起點不閃屏
當(dāng) curIndex 等于克隆項索引時，立即把 scrollTop 設(shè)為 0，人眼幾乎察覺不到跳變，從而形成無限循環(huán)。
四、一行命令替換內(nèi)容
只要保持每條文本高度一致，替換 <ul> 的 innerHTML 即可熱插播新公告，無需重啟動畫邏輯。
總結(jié)
「克隆第一項 + 逐幀滾動」是公告欄場景下最輕量的無限循環(huán)方案，可讓文字像膠片一樣永遠滾動，不閃、不抖、不掉幀。
到此這篇關(guān)于使用JavaScript實現(xiàn)絲滑文字滾動詳細代碼的文章就介紹到這了,更多相關(guān)JS絲滑文字滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript動態(tài)創(chuàng)建表格及添加數(shù)據(jù)實例詳解
這篇文章主要介紹了javascript動態(tài)創(chuàng)建表格及添加數(shù)據(jù),以實例形式分析了javascript動態(tài)創(chuàng)建表格的常用方法,包括不兼容IE6與兼容IE6的實現(xiàn)方法,非常具有實用價值,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了禁用Enter鍵表單自動提交實現(xiàn)代碼,需要的朋友可以參考下2014-05-05
js小數(shù)計算小數(shù)點后顯示多位小數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s小數(shù)計算小數(shù)點后顯示多位小數(shù)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了js實現(xiàn)同一頁面多個不同運動效果的方法,涉及javascript同時實現(xiàn)多個效果的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
Chrome調(diào)試折騰記之JS斷點調(diào)試技巧
這篇文章主要介紹了Chrome調(diào)試折騰記之JS斷點調(diào)試技巧，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
微信小程序云開發(fā)使用方法新手初體驗，開發(fā)者可以使用云開發(fā)開發(fā)微信小程序、小游戲，無需搭建服務(wù)器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
解決layui動態(tài)添加的元素click等事件觸發(fā)不了的問題
今天小編就為大家分享一篇解決layui動態(tài)添加的元素click等事件觸發(fā)不了的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript實現(xiàn)棧結(jié)構(gòu)Stack過程詳解
這篇文章主要介紹了JavaScript實現(xiàn)棧結(jié)構(gòu)Stack過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
bootstrap就非常好用，而且框架布局很漂亮，用起來也很簡單。今天小編給大家分享BootStrap的Datepicker控件使用心得，一起看看吧2016-05-05
這篇文章主要介紹了JS數(shù)字抽獎游戲?qū)崿F(xiàn)方法,可實現(xiàn)按下回車鍵出現(xiàn)隨機數(shù)字切換的效果,涉及時間與隨機數(shù)的相關(guān)操作技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05