還記得我前端剛?cè)胄械牡谝徽n，就是手寫輪播圖。那個時候感覺很難并且要寫很多 js 邏輯代碼，才能實現(xiàn)出一個最基礎(chǔ)的輪播。

每次想到那些復(fù)雜的 JavaScript 邏輯，我都心生敬畏。

現(xiàn)在好了，Chrome 135 帶來新特性，借助 CSS Overflow 5 規(guī)范，單靠 CSS 就能整出超多酷炫輪播特效，不用再寫繁瑣的 JavaScript 代碼。

想用 CSS 實現(xiàn)各種炫酷的輪播效果，先給大家介紹 ::scroll-button() 和 ::scroll-marker() 這兩個偽元素！

滾動按鈕（::scroll-button()）

滾動按鈕（::scroll-button()）是一種有狀態(tài)、交互式的滾動功能按鈕。

它可以幫助用戶輕松訪問內(nèi)容，按下時可使?jié)L動區(qū)域滾動 85%。

對于一次僅顯示一個全寬項且具有滾動貼靠點的輪播界面，此值會按項顯示；而對于長列表，它會滾動到幾乎整頁的位置。

.carousel::scroll-button(left) {
  content: "?" / "Scroll Left";
}

.carousel::scroll-button(right) {
  content: "?" / "Scroll Right";
}

.carousel::scroll-button(*)::focus-visible {
  outline-offset: 5px;
}

滾動標(biāo)記（::scroll-marker()）

滾動標(biāo)記（::scroll-marker()）類似于頁內(nèi)鏈接，每個標(biāo)記都可以表示滾動條中的任何項。

它們不僅提示輪播界面的大小，還允許用戶快速跳轉(zhuǎn)到特定位置。滾動標(biāo)記具有以下特點：

• 包含一個 :target-current 狀態(tài)，用于表示標(biāo)記在視野內(nèi)或已固定。
• 支持鍵盤導(dǎo)航，其行為類似于 focusgroup。
• 提供屏幕閱讀器體驗，并以標(biāo)簽頁列表的形式生成報告。

.carousel {
  scroll-marker-group: after;
}

.carousel > li::scroll-marker {
  content: ' ';
}

.carousel > li::scroll-marker:target-current {
  background: var(--accent);
}

多種輪播特效展示

基于這兩個新功能，開發(fā)者可以創(chuàng)建出 100 多種不同的輪播特效。

以下列舉部分示例：

(1) 水平輪播

這是最為常見的輪播形式，內(nèi)容沿著水平方向滾動展示。

通過簡單的 CSS 設(shè)置，即可創(chuàng)建一個基本的水平滾動區(qū)域。這種輪播方式常用于圖片展示或產(chǎn)品推薦，用戶可以輕松地左右滑動查看不同內(nèi)容。

(2) 視頻輪播

視頻輪播主要用于展示多個視頻預(yù)覽，用戶可以方便地在不同視頻之間切換。

與常規(guī)圖片輪播不同，視頻輪播需要優(yōu)化視頻加載及播放連貫性，確保流暢的觀看體驗。

(3) 應(yīng)用切換器輪播

應(yīng)用切換器輪播在展示多個應(yīng)用或大型項目資料時非常方便，用戶可以從不同角度瀏覽信息。

(4) 產(chǎn)品展示輪播

產(chǎn)品展示輪播在電商網(wǎng)站上應(yīng)用廣泛，它能夠全方位展示產(chǎn)品的細(xì)節(jié)和特點。

(5) 3D 輪播

3D 輪播通過獨特的視覺效果，將內(nèi)容以三維形式呈現(xiàn)給用戶。

這種輪播方式常用于吸引用戶注意，需要更精細(xì)的設(shè)計和優(yōu)化以確保在各種設(shè)備上都能流暢運行。

(6) 縱向 3D 滾動輪播

縱向 3D 滾動輪播為用戶提供了更獨特的視角和交互體驗，內(nèi)容以縱向 3D 的方式展示，適合用于創(chuàng)意設(shè)計展示或吸引用戶注意力的場景。

優(yōu)勢與好處

• 無需 JavaScript ：減少了代碼復(fù)雜度，提高了性能。
• 無障礙功能支持 ：內(nèi)置的無障礙功能讓輪播界面更加友好。
• 性能優(yōu)化 ：無需加載和執(zhí)行 JavaScript 代碼，頁面的加載速度和運行性能得到顯著提升。
• 開發(fā)效率提高 ：CSS 的代碼相對簡潔直觀，開發(fā)輪播界面更加便捷快速。

Chrome 團隊仍在持續(xù)優(yōu)化這些功能，并計劃在未來支持更多自定義選項，例如周期性滾動（像旋轉(zhuǎn)木馬一樣循環(huán)播放）等功能。這將進一步提升輪播界面的靈活性和用戶體驗。

總之，Chrome 135 推出的 CSS Overflow 5 規(guī)范中的輪播界面功能為網(wǎng)頁設(shè)計帶來了重大變革。

開發(fā)者可以利用這些新特性輕松打造出豐富多樣的輪播特效，無需依賴 JavaScript，同時兼顧性能和無障礙功能。

• 官方更多案例：https://chrome.dev/carousel
• 在線輪播配置器：https://chrome.dev/carousel-configurator/