前端早讀課 - 【第2711期】利用CSS實現超長內容滾動播放－鑽石舞台

前言

閱讀郵件看到一張菜單圖，上面有一道」成都口水雞「的菜，由於菜單字數限制就成了」成都口水「，所以平時在實現類似這種模塊的時候就要考慮具體的交互方式了，那今天的案例分享就來源於此，有興趣看看。今日前端早讀課文章由 @QCY 分享。

正文從這開始～～

如果 UI 稿設計了一個單行定寬的樣式，對於超過長度的內容，一般都會選擇隱藏並展示省略號

這也是實現起來最簡單，最常用的處理方法

但是在實際需求中，很有可能要求在不改變布局的情況下，用單行展示超長的文案且不能省略信息

這時候就可以考慮，用內容來回滾動來實現上述的效果

一、需求分析

先看最終效果

文案來回在指定區域內水平滾動，並且在頭尾處停留一段時間

同時我們考慮做成通用的 css，所以儘可能的少使用固定值

二、功能實現1. 基礎布局

先構造一個基本樣式

box 作為任意需要包含滾動組件 div 的 class，寬度、邊框等個性化的 style 都應該在 box 上設置

scroll-wrap 作為滾動容器的通用 class

scroll-item 作為滾動內容的通用 class

// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="box"> <div class="scroll-wrap"> <div class="scroll-item"> 我是開頭，我是中間我是中間我是中間，我是結尾 </div> </div> </div> </body> </html> .box { max-width: 15em; border: 1px solid; } .scroll-wrap { overflow: hidden; white-space: nowrap; }

2. 動效分析

如何實現來回滾動的效果呢？

其實只要實現內容的的兩種狀態，再加上 animation 讓這兩種狀態來回切換。如果這兩種狀態的實現都使用的相同的屬性，那麼切換過程中自然就會加上動畫效果

兩種狀態：

「我是開頭」靠左顯示

「我是結尾」靠右顯示

我們從簡單的部分開始實現，先寫一個來回切換狀態的 animation 動畫

.scroll-item { animation: scroll linear 4s alternate infinite; } @keyframes scroll { 0% { background: red; } 100% { background: yellow; } }

簡單解釋一下當前 animation 的屬性

animation-name：所使用的 @keyframes 的名稱 scroll

animation-timing-function：動畫的速度曲線，linear 表示勻速

animation-duration：規定完成動畫所花費的時間為 4s

animation-direction：是否應該輪流反向播放動畫，alternate 表示在偶數次會反向播放

animation-iteration-count：定義動畫的播放次數，infinite 表示無限次

animation 定義好了，然後開始實現最關鍵的部分，頭尾靠邊顯示的兩種狀態

3. 頭尾位置

如果只是單純的實現其實很簡單，直接用 position: absolute，再分別設置 left，right 即可

.scroll-wrap { overflow: hidden; white-space: nowrap; position: relative; height: 1.4em; } .scroll-item { animation: scroll linear 4s alternate infinite; position: absolute; } @keyframes scroll { 0% { left: 0; } 100% { right:0; } }

但是由於 left、right 是不同的屬性，所以狀態改變過程中並沒有動畫效果

所以接下來我們的目標就是：如何用 left 實現 right: 0

思考 position: absolute 是如何實現居中的。就會比較容易聯想到，可以通過 transform 屬性來實現我們想要的效果

@keyframes scroll { 0% { left: 0; transform: translateX(0); } 100% { left: 100%; transform: translateX(-100%); } }

再給 keyframes 加上兩個動畫節點，讓文案出現頭尾的停留

@keyframes scroll { 0% { left: 0; transform: translateX(0); } 10% { left: 0; transform: translateX(0); } 90% { left: 100%; transform: translateX(-100%); } 100% { left: 100%; transform: translateX(-100%); } }

看起來已經比較完美了？

三、代碼優化

回顧我們最開始定下的目標

並且考慮做成通用的 css，所以儘可能的少使用固定值

由於用了 position: absolute，導致需要額外給父元素指定高度。我們理想的狀態應該是

內容高度自然撐開

box 寬度大於內容時，不會發生滾動

box 寬度由內容撐開

使用我們現成的方案，只有不出現上述三種情況時才能正常展示

究其原因，在於寬高都無法自適應，而這主要是由 position: absolute 造成的。所以我們考慮換一個其他方案來實現兩種狀態。

不過再逐步說明一遍就過於繁瑣了，這裡直接列出最終代碼。同時解釋一些關鍵屬性

// 個性化部分 ⬇️ .box { width: 15em; border: 1px solid #ddd; } // 通用代碼部分 ⬇️ .scroll-wrap { max-width: 100%; display: inline-block; vertical-align: top; overflow: hidden; white-space: nowrap; } .scroll-item { animation: scroll linear 4s alternate infinite; float: left; } @keyframes scroll { 0% { margin-left: 0; transform: translateX(0); } 10% { margin-left: 0; transform: translateX(0); } 90% { margin-left: 100%; transform: translateX(-100%); } 100% { margin-left: 100%; transform: translateX(-100%); } }

max-width: 100%：保證自身寬度不超過 box

display: inline-block：目的是讓 scroll-wrap 寬度自適應，可以被子元素撐開

vertical-align: top：設置完上面的屬性之後，inline 會帶上 1.x 的行高導致高度過大。設置 top 可以消除

float: left：為了讓後續的 margin-left，transform 符合預期需要設置 float

margin-left：等效於上一個方案中的 left