繁體中文

CSS 教學

CSS3教學

CSS 高級

CSS 參考手冊

CSS 响應式

CSS - 滑動條：初學者指南

Hello there, future web design wizards! Today, we're going to dive into the magical world of CSS scrollbars. Don't worry if you've never written a line of code before – I'll be your friendly guide on this journey, and by the end, you'll be styling scrollbars like a pro!

CSS - Scrollbars

目錄

  1. 滑動條介紹
  2. 如何樣式化滑動條？
  3. 滑動條選擇器
  4. 創建自定義滑動條
  5. 樣式化 CSS 滑動條
  6. CSS 滑動條相關屬性

滑動條介紹

在我們深入細節之前，讓我們先來了解一下滑動條是什麼。你每天瀏覽網頁時都會看到它們——它們是網頁側邊或底部的小條，當屏幕上無法一次顯示所有內容時，讓你向上、向下、向左或向右滾動。

現在，想像一下如果你能揮動一根魔杖改變這些滑動條的外觀。嗯，今天我們就是要學習如何使用 CSS 來做到這點！

如何樣式化滑動條？

使用 CSS 程式碼樣式化滑動條就像給你的網頁來個大变身。這是一種讓你的網站脫穎而出並提供獨特用戶體驗的方法。讓我們從一個簡單的例子開始：

/* 這將應用於你的網頁整個正文部分 */
body::-webkit-scrollbar {
width: 12px;               /* 滑動條整體的寬度 */
}

body::-webkit-scrollbar-track {
background: orange;        /* 跟蹤區域的顏色 */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* 滑動塊的顏色 */
border-radius: 20px;       /* 滑動塊的圓角 */
border: 3px solid orange;  /* 在滑動塊周圍創造填充 */
}

在這個例子中，我們告訴瀏覽器：

  1. 使滑動條寬度為 12 像素
  2. 將跟蹤區域（滑動塊滑動的區域）設為橙色
  3. 將滑動塊（用來滾動的部分）設為藍色
  4. 給滑動塊添加圓角
  5. 在滑動塊周圍添加橙色邊框

很酷，對吧？但等一下，還有更多！

滑動條選擇器

為了樣式化滑動條，我們使用特殊的選擇器。將這些選擇器視為魔法詞語，告訴 CSS 要更改滑動條的哪一部分。以下是一些主要的選擇器：

選擇器 描述
::-webkit-scrollbar 樣式化整個滑動條
::-webkit-scrollbar-button 樣式化滑動條上的按鈕（指向上和向下的箭頭）
::-webkit-scrollbar-track 樣式化滑動條的跟蹤區域（進度條）
::-webkit-scrollbar-track-piece 樣式化跟蹤區域（進度條）上未被把手覆蓋的部分
::-webkit-scrollbar-thumb 樣式化可拖動的滾動把手
::-webkit-scrollbar-corner 樣式化滑動條底部角落，水平和垂直滑動條相遇的地方
::-webkit-resizer 樣式化出現在某些元素底部角落的可拖動調整把手

創建自定義滑動條

現在我們知道了我們的魔法詞語（選擇器），讓我們創建一個有趣的、自定義的滑動條：

/* 我們來創建一個霓虹主題的滑動條！ */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

在這個例子中，我們創建了一個看起來像來自赛博朋克電影的滑動條！跟蹤區域是黑色並帶有微妙內影，滑動塊則有變化的漸變。將這個類應用於任何具有溢出的元素，看魔術發生！

樣式化 CSS 滑動條

讓我們將樣式化滑動條的過程分解為以下步驟：

  1. 選擇目標：決定你要樣式化整個頁面的滑動條（使用 body）還是特定元素（使用類或 ID）。

  2. 設置寬度：使用 ::-webkit-scrollbar 選擇器設置滑動條的整體寬度。

  3. 樣式化跟蹤區域：使用 ::-webkit-scrollbar-track 設置背景、添加陰影或其他樣式。

  4. 設計滑動塊：使用 ::-webkit-scrollbar-thumb 樣式化滑動條的可拖動部分。這裡可以創造性地使用顏色、漸變和形狀。

  5. 添加互動性：使用如 :hover 或 :active 的伪類來在用戶與滑動條交互時改變其外觀。

以下是一個將所有這些結合起來的例子：

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

這為帶有 cool-scroll 類的任何元素創建了一個時尚、現代的滑動條。滑動條比默認寬度略寬，有圓角，並在懸停時變暗。

CSS 滑動條相關屬性

雖然我們一直在專注於 WebKit 瀏覽器（如 Chrome 和 Safari），但有些標準的 CSS 屬性在不同的瀏覽器之間是通用的。以下是一個這些屬性的表格：

屬性 描述
scrollbar-width 設置滑動條的寬度（僅對 Firefox 有效）
scrollbar-color 設置滑動條的顏色（僅對 Firefox 有效）
overflow 指定如果內容溢出元素框要如何處理
overflow-x 指定如果內容從元素的左/右邊緣溢出要如何處理
overflow-y 指定如果內容從元素的上/下邊緣溢出要如何處理

以下是如何使用它們的例子：

/* 對於 Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* 對於其他瀏覽器 */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

這段代碼在不同的瀏覽器中設置了一致的滑動條樣式。它們很細，並且有淺色的跟蹤區域和深色的滑動塊。

這就是全部，各位！你剛剛升級了你的 CSS 技能，並學會了如何樣式化滑動條。記住，能力越大，責任越大——謹慎使用這些技巧來增强用戶體驗，而不是創造分散注意力或難以使用的界面。

繼續嘗試，持續學習，最重要的是，享受樂趣！誰知道，也許下一個網頁設計的潮流將是你獨特樣式的滑動條。快樂編程！

Credits: Image by storyset

上一教程:
CSS - 尺寸
下一教程:
CSS - 內聯區塊