前言

標題解釋：
數字滾動： 數字 0 變為 5，顯示該數字的元素向上滾動最后顯示 5
最短滾動： 數字 9 變為 1，向下滾動依次顯示 9 - 0 - 1
如果這是你需要的‘組件’，那就繼續吧！

需求

存在兩個數字 start、end，需要實現一個類似滾輪滾動的效果，由 start 滾動到 end，其中，每次滾動都需要以盡量少的次數滾動
例如：
9 - 1 ==> 9 - 0 - 1;
2 - 0 ==> 2 - 1 - 0;

實現

首先，一步步的來，我們先實現滾動效果，暫不考慮 最短滾動
先來一個窗口用來觀察滾輪

<div class="scroller-window"><div class="single-window"><p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p></div> </div> .scroller-window {...height: 3em;overflow: hidden; } .single-scroller {transition: transform ease-in; }

接下來只需要將 scroller-window 下的 p元素高度設為 100%，然后，根據 end的值，將 single-scroller 滾動(translateY)即可

const scroller= document.getElementByClassName('single-scroller')[0]// end 是滾輪的目的數字 0 - 9 const end = genRandomNum() // 0-9 隨機數 const step = 10 // scroller里10個數字，每個占 10% scroller.style.transform = `translateY(-${end * step}%)`

這樣就實現了一個最簡單的 滾輪

但是從 9 - 1，它會向上滾 9 - 8 -...- 1，
我們需要讓它按最短路徑滾動，我們可以把 start 到 to 的正向路徑與反向路徑都計算出來進行比較，然后選擇較短的那部分用來計算 tanslateY
同時，我們還需要把滾輪中的數字擴充，以供滾動滾出默認區，這樣上面的 step 屬性就變成了 100/20 = 5

<p>5</p><p>6</p><p>7</p><p>8</p><p>9</p> <p>0</p><p>1</p><p>2</p><p>3</p><p>4</p> <p>5</p><p>6</p><p>7</p><p>8</p><p>9</p> <p>0</p><p>1</p><p>2</p><p>3</p><p>4</p>

計算最短滾動：例如從 0 到 3

向上滾動3-0 = 3 次 向下滾動10 - (3 - 0) = 7 次 |--------------|-----------------------------| |____|____|____|____|____|____|____|____|____| 0 1 2 3 4 5 6 7 8 9 function getFastestTranslation(start, end) {let direction = 1; // -1 -> scroll up | 1 -> scroll downlet steps = 0;let startTansition = getNormalTranslation(start)if (start > end) {// start - end 為 start 向 end 遞減的次數setDirectionAndSteps(Math.abs(start - end), Math.abs(10 - start + end));} else if (start < end) {// end - start 為 start 向 end 遞減的次數setDirectionAndSteps(Math.abs(10 - end + start), Math.abs(end - start));}startTansition += direction * steps * step/*** 比較上下方向，設置最短步數* @param {*} dstep 向下滾動的步數* @param {*} ustep 向上滾動的步數*/function setDirectionAndSteps(dstep, ustep) {const isUpperFaster = dstep > ustepdirection = isUpperFaster ? -1 : 1steps = isUpperFaster ? ustep : dstep}return `translateY(${startTansition}%)`; }function getNormalTranslation(num) {// 每個 p 元素占比為 5%, 第一個 0 在 25% 處出現return -(25 + num * 5) }

滾動之后，還需要將其重置一下，如果滾輪落在了 上半區或下半區，那么下一次滾動可能會不正常
例如：
5 6 7 8 9 0 1 (2)...由 2 滾到 8 5 6 7 (8) 9 0 1 2...
由 8 滾到 4 (空) 5 6 7 8 9 0 1 2...
因此每次超出中間區就執行一次沒有過渡的 translateY 將滾輪恢復到中間區

scroller.addEventListener('transitionend', ({ target }) => {reposition(target, end) })function reposition({ style }, num) {const { transitionDuration } = styleconst normalTranslation = `translateY(${getNormalTranslation(num)}%)`if (style.transform !== normalTranslation) {style.transitionDuration = '0s'style.transform = normalTranslationrequestAnimationFrame(requestAnimationFrame.bind(null, () => {style.transitionDuration = transitionDuration}))} }

接下來，修改 end 之前，執行 start = end 然后準備滾動

let step = 5 let start = 0 let end = genRandomNum()window.onload = () => {const scroller = document.getElementsByClassName('single-scroller')[0]// 最開始時滾輪將會顯示 5，將其置為 0scroller.style.transitionDuration = '0s'scroller.style.transform = `translateY(${getNormalTranslation(start)}%)`setTimeout(() => {start = endend = genRandomNum()scroller.style.transitionDuration = '1s'}, 0)setTimeout(() => {start = endend = genRandomNum()scroller.style.transform = getFastestTranslation(start, end)}, 1000)scroller.addEventListener('transitionend', ({ target }) => {reposition(target, end)})}

滾輪完成！項目鏈接

總結

以上是生活随笔為你收集整理的js实现数字滚动显示(最短滚动版)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。