如何在 WordPress 中自定義滾動條？兩個方法教你快速設定！

Facebook Line Messenger Telegram

在 WordPress 自訂捲軸樣式，最實用的做法是同時使用 ::-webkit-scrollbar 偽元素和 W3C 標準屬性 scrollbar-color、scrollbar-width，這樣可以涵蓋 Chrome、Safari、Edge 和 Firefox 所有主流瀏覽器。不想碰程式碼的人則可以用外掛搞定。

為什麼要自訂 WordPress 網站的捲軸樣式

多數人在設計網站時會花心思調整配色、字型和版面，但很容易忽略瀏覽器右側那條預設的灰色捲軸。它的樣式由作業系統和瀏覽器決定，跟你精心挑選的 WordPress 佈景主題沒有半點關係。如果你的網站重視品牌一致性，捲軸自訂就是補上視覺拼圖的最後一塊。

實務上，以下三種網站特別需要自訂捲軸：深色系網站（預設淺色捲軸太突兀）、品牌色鮮明的企業官網、以及以視覺設計為賣點的展示型網站。如果你曾用 Alwane 分析過網站色系配置，卻讓捲軸維持預設灰色，整個色彩計畫就破功了。

反過來說，如果你的網站是一般的內容部落格，行動裝置流量佔比超過 70%，那投入捲軸自訂的效益其實不高。因為手機瀏覽器多半使用覆蓋式捲軸，你的 CSS 自訂幾乎不會顯示。先判斷你的讀者群和使用場景，再決定要不要做這件事。

瀏覽器捲軸自訂的現況與限制

捲軸樣式在 CSS 規範中長期處於「各家瀏覽器各玩各的」狀態，但截至 2026 年 5 月，情況已經大幅改善。目前有兩條技術路線：

路線一：WebKit 偽元素。Chrome、Safari、Edge 等基於 WebKit 或 Chromium 的瀏覽器，支援一組 ::-webkit-scrollbar 開頭的偽元素，可以精確控制捲軸的每個部位，包括滑塊、軌道、箭頭按鈕和角落區域。這是目前最靈活的做法，支援圓角、陰影、漸層和動畫等進階效果。

路線二：W3C 標準屬性。CSS Scrollbars Styling Module Level 1 定義了兩個標準屬性：scrollbar-width（控制寬度）和 scrollbar-color（控制滑塊與軌道顏色）。Firefox 是最早支援的瀏覽器（64 版起），Chrome 和 Edge 從 121 版開始支援，Safari 則從 17.4 版加入支援。截至 2026 年 5 月，這兩個屬性已成為 Baseline Newly Available 標準，所有主流瀏覽器都已支援。

行動裝置的情況比較特殊。iOS Safari 和大部分手機瀏覽器採用覆蓋式捲軸，捲動時才會短暫顯示，平時隱藏。在這種環境下，CSS 自訂的效果非常有限。建議完成設定後，透過 LambdaTest 這類瀏覽器相容性測試工具，在各種裝置和瀏覽器組合下確認捲軸的呈現效果。

方法一：用 WordPress 外掛快速自訂捲軸

不熟悉 CSS 或者只想幾分鐘搞定的人，外掛是最直接的選擇。WordPress 外掛庫裡有專門處理捲軸樣式的外掛，裝好之後在設定頁面選顏色、調寬度就能完成。邏輯跟用 WordPress SEO 外掛處理搜尋最佳化一樣，把技術細節交給工具，你只要專注於結果。

Advanced Scrollbar 外掛安裝與設定

在 WordPress 外掛庫搜尋「Advanced Scrollbar」就能找到這款外掛。設定步驟：

進入 WordPress 後台，點選「外掛」→「安裝外掛」
搜尋「Advanced Scrollbar」，點選「立即安裝」並啟用
前往「設定」→「Custom Color Scrollbar Settings」進入設定頁面
調整捲軸滑塊的顏色、軌道的背景色，以及滑鼠滾輪的捲動速度
儲存設定後，前台重新整理就能看到效果

這款外掛的優勢是完全不需要接觸程式碼，所有調整都在圖形化介面中完成。但要注意它的安裝量不高，而且最近一次更新已經是比較久以前的事了，使用前建議確認是否與你目前的 WordPress 版本相容。如果你的 WordPress 網站使用了快取外掛，修改捲軸設定後記得清除快取，否則前台可能不會立刻反映變更。

外掛方案的優缺點

外掛的好處是門檻低、速度快、不需要任何程式基礎。缺點是：每多裝一個外掛就多一份維護成本，如果外掛作者停止更新，未來 WordPress 大版本升級時可能出現相容性問題。而且外掛能提供的自訂彈性有限，漸層色彩或 hover 動畫這種進階效果多半做不到。

效能方面也要考慮。雖然捲軸外掛本身的影響很輕微，但如果你的網站已經裝了不少外掛（例如 Imagify 圖片壓縮、ShortPixel、UpdraftPlus 備份等），每個外掛都會在前台載入自己的 JavaScript 和 CSS，積少成多之下對頁面載入速度會有影響。

方法二：使用 CSS 偽元素自訂捲軸（WebKit 系列）

願意動手寫幾行 CSS 的話，這個方法能帶來最大的彈性和控制力。WebKit 系列瀏覽器提供了一組偽元素，讓你精確控制捲軸的每個組成部分。原理跟用 CSS 漸層產生器製作背景一樣，都是透過 CSS 語法直接操控視覺呈現。

WebKit 偽元素完整解析

WebKit 提供以下幾個偽元素，讓你分別設定捲軸的不同部位：

::-webkit-scrollbar：捲軸的整體容器，可以設定寬度（垂直捲軸）或高度（水平捲軸）
::-webkit-scrollbar-track：捲軸的軌道區域，也就是滑塊移動的背景區
::-webkit-scrollbar-thumb：捲軸的滑塊，也就是你實際拖曳的那個部分
::-webkit-scrollbar-thumb:hover：滑塊在滑鼠懸停時的樣式
::-webkit-scrollbar-button：軌道兩端的上下箭頭按鈕（現代瀏覽器多半已隱藏）
::-webkit-scrollbar-corner：當同時有水平和垂直捲軸時，右下角的交集區域

完整 CSS 程式碼範例

以下是一組可以直接複製使用的 CSS 程式碼，你可以依照自己的需求修改顏色和尺寸：

/* 自訂捲軸樣式 - 適用於 WebKit 系列瀏覽器 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-left: 1px solid #e0e0e0;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

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

/* 標準屬性 - 確保 Firefox 也有基本自訂 */
html {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

這組程式碼做了兩件事：WebKit 偽元素負責 Chrome、Safari、Edge 的精細控制（寬度 10px、軌道淺灰、滑塊中灰加圓角），標準屬性則確保 Firefox 也有基本的顏色和寬度自訂。你可以把 #888 和 #555 替換成你配色方案中的色彩值。如果你需要更多陰影效果的靈感，可以參考我們整理的 CSS box-shadow 範例。

兩組 CSS 可以和平共存，瀏覽器會自動套用自己支援的部分，忽略不認識的規則。

Firefox 的捲軸自訂：scrollbar-width 與 scrollbar-color

Firefox 不支援 WebKit 的偽元素，但率先實作了 W3C 提出的兩個標準屬性。截至 2026 年 5 月，這兩個屬性已經獲得所有主流瀏覽器支援（Chrome 121+、Edge 121+、Safari 17.4+、Firefox 64+），正在成為跨瀏覽器的共通方案。

scrollbar-width 用來控制捲軸的寬度，接受三個值：auto（預設寬度）、thin（細捲軸）、none（隱藏捲軸但保留捲動功能）。如果你覺得預設捲軸太粗佔空間，設成 thin 是最常見的選擇。

scrollbar-color 可以同時設定滑塊和軌道的顏色，語法是 scrollbar-color: [滑塊顏色] [軌道顏色]。例如：

/* Firefox 捲軸自訂 */
html {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

就這兩行，很簡潔。如果你只需要基本的顏色和寬度調整，單用標準屬性就能同時搞定所有現代瀏覽器。但如果要圓角、陰影、漸層這類進階效果，WebKit 偽元素仍然是唯一選擇。這跟你在使用 CSS 背景樣式或 Neumorphism 產生器時一樣，瀏覽器會自動套用自己支援的部分。

進階捲軸樣式設計：漸層、圓角、陰影與動畫

基礎的顏色替換只是起點。WebKit 偽元素允許你使用各種 CSS 屬性，包括漸層背景、圓角、陰影和轉場動畫，讓捲軸不再只是功能性元件，而是設計的一部分。

先來看漸層效果。你可以把 ::-webkit-scrollbar-thumb 的 background 從純色換成 CSS 漸層：

/* 漸層捲軸滑塊 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 5px;
    box-shadow: 0 0 6px rgba(102, 126, 234, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.6);
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 5px;
}

滑塊用紫色系漸層填色，加上圓角讓它變成膠囊形狀，再配上柔和的發光陰影增加立體感。當滑鼠懸停時，漸層方向反轉且陰影加強，產生一種「被點亮」的視覺回饋。軌道也加上了圓角，整體視覺更統一。

如果想要讓過渡更順滑，可以在滑塊加上 transition 屬性：

::-webkit-scrollbar-thumb {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

這樣 hover 時的顏色和陰影變化就不會是瞬間切換，而是有 0.3 秒的平滑過渡。這類動畫效果和你在設計 3D 書本效果或 UI Kit 元件時追求的流暢感是一致的，能讓整個網站的互動體驗更上層樓。

在哪裡加入自訂捲軸的 CSS

知道要寫什麼 CSS 之後，接下來的問題是程式碼要放在哪裡。WordPress 提供了好幾個位置讓你加入自訂 CSS，選哪一個取決於你的使用情境。

方法 A：佈景主題自訂器的「附加 CSS」。進入「外觀」→「自訂」→「附加 CSS」，把程式碼貼進去就行。這是最簡單的方式，所見即所得，編輯的同時可以預覽捲軸效果。不過這些 CSS 會存在資料庫裡而不是檔案中，換主題就要重新貼。如果你正在用的 WordPress 主題已經確定不會再換，這個方法就夠用了。

方法 B：子主題的 style.css。如果你有自己的子主題（Child Theme），把 CSS 寫在子主題的 style.css 裡是最乾淨的做法。CSS 會跟著主題版本控制走，不會因為更新而遺失。這個方法比較適合有開發經驗的人，或者你的網站是交給 Bluehost、Kinsta 這類主機商的託管環境中運作的專案。

方法 C：使用 CSS 外掛。如果你不想碰主題檔案，也可以安裝專門管理自訂 CSS 的外掛，例如「Simple Custom CSS and JS」。這類外掛提供一個獨立的介面讓你集中管理所有額外的 CSS，不受主題切換影響。就跟 Gutenberg 編輯器和傳統編輯器各有擁護者一樣，選擇哪種方式純粹看你的習慣。

不管你選哪種方式，有一個大前提要記住：絕對不要直接修改父主題的 style.css。主題一更新，你做的修改就全沒了，這是 WordPress 開發的基本常識。如果你還不確定 WordPress.com 和 WordPress.org 的差異，建議先搞清楚你用的是哪一種，因為這會影響你能自訂 CSS 的範圍。

跨瀏覽器捲軸相容性完整對照表

以下對照表整理了各瀏覽器的支援情況，建議搭配前面的教學一起看，確認你的目標使用者群體使用的瀏覽器支援哪些屬性。

屬性/方法	Chrome	Safari	Firefox	Edge	行動裝置
::-webkit-scrollbar 偽元素	完整支援	完整支援	不支援	完整支援	效果有限
scrollbar-width	121+ 支援	17.4+ 支援	64+ 支援	121+ 支援	效果有限
scrollbar-color	121+ 支援	17.4+ 支援	64+ 支援	121+ 支援	效果有限
漸層/陰影/圓角	完整支援	完整支援	不支援	完整支援	不適用
hover 動畫效果	完整支援	完整支援	不支援	完整支援	不適用

從這張表可以得出一個結論：如果你希望最大程度的跨瀏覽器覆蓋，應該同時使用 WebKit 偽元素和標準屬性兩套方案。WebKit 偽元素負責 Chrome、Safari、Edge 的精細控制，標準屬性確保 Firefox 至少有基本的顏色和寬度自訂。完成後用網站測速工具確認 CSS 不會拖慢頁面渲染速度，同時建議搭配 WordPress 網站速度最佳化的技巧來維持整體效能。

行動裝置那欄標註「效果有限」是因為手機瀏覽器多半使用覆蓋式捲軸，CSS 自訂可能完全不會顯示。這不是 bug，而是行動裝置的設計哲學不同。如果你有安裝 GZIP 壓縮來加速網站傳輸，或是使用 GiftofSpeed 監測載入效能，這些最佳化對行動裝置的幫助反而比捲軸自訂更大。

無障礙設計與效能注意事項

自訂捲軸時，有幾個容易被忽略但很重要的細節。這些不是「做了加分」的選配項目，而是「不做會扣分」的基本功。

色彩對比度是第一個要檢查的。如果你把滑塊設成淡灰色，軌道也設成淡灰色，使用者可能根本看不出捲軸在哪裡。根據 WCAG（網頁內容無障礙指南）的建議，互動元件和背景之間的對比度至少要達到 3:1。你可以用瀏覽器的開發者工具檢查對比度，這和你在做 WordPress 網站健康檢查時關注的原則一樣，都是為了確保所有使用者都能順利操作。

捲軸寬度不建議設得太窄。低於 6px 的捲軸在觸控裝置上幾乎無法拖曳，就算是桌面環境也不太好操作。建議把寬度維持在 8px 到 12px 之間，兼顧美觀和實用性。

動畫效果要節制。捲軸的 transition 動畫雖然看起來很酷，但過度的視覺效果會分散使用者的注意力，在低效能裝置上可能造成卡頓。保持簡潔、流暢、不干擾閱讀體驗，才是好的捲軸設計。如果你的網站已經有透過 WordPress 安全性強化和 WP Umbrella 監測來維持穩定運作，捲軸自訂也應該秉持同樣「不添亂」的原則。

常見問題 FAQ

自訂捲軸會影響 SEO 排名嗎？

不會直接影響。捲軸的 CSS 自訂屬於純視覺層面的修改，搜尋引擎的爬蟲不會因為你改了捲軸顏色就給你加分或扣分。但如果你的自訂捲軸 CSS 體積很大，導致頁面載入速度變慢，就可能間接影響網站速度相關的排名因素。實務上，幾行捲軸 CSS 不太可能造成明顯的效能問題。

CSS 方法和外掛方法哪個比較好？

如果你對 CSS 有基本認識，強烈建議用 CSS 方法。彈性遠高於外掛，不會增加額外的外掛負擔，而且你可以精確控制捲軸的每個細節。外掛只適合完全不想碰程式碼的人，或者你的網站是交給客戶自己管理的情況，用外掛可以讓他們自己在圖形介面中調整。

行動裝置上捲軸自訂有效嗎？

大部分情況下效果很有限。iOS Safari 和 Android Chrome 都採用覆蓋式捲軸，只在捲動時短暫顯示，CSS 自訂多半不會生效。如果你的網站行動裝置流量佔比很高（超過 70%），投資在捲軸自訂上的效益就不太高，不如把精力放在提升行動版面的整體體驗上。

免費外掛夠用嗎？還是需要付費方案？

純粹改捲軸顏色和寬度的話，免費外掛完全夠用。但如果你的需求比較進階（例如每個頁面顯示不同的捲軸樣式、搭配動畫效果），免費外掛的功能可能就不夠了。這時候用 CSS 直接寫反而更划算，因為 CSS 本身就是免費的，而且能做到的事情比任何付費外掛都多。如果你需要一個測試環境來實驗各種捲軸效果，可以考慮在 WordPress 虛擬主機推薦中選擇一個適合的方案來建立測試站。

如何在特定頁面套用不同的捲軸樣式？

WordPress 會自動為每個頁面加上專屬的 CSS class，例如首頁有 .home、文章頁有 .single、頁面有 .page。你可以利用這些 class 來針對不同頁面類型設定不同捲軸樣式：

/* 只有文章頁使用紫色捲軸 */
.single ::-webkit-scrollbar-thumb {
    background: #764ba2;
}

/* 首頁使用藍色捲軸 */
.home ::-webkit-scrollbar-thumb {
    background: #667eea;
}

自訂捲軸會拖慢網站速度嗎？

正常情況下不會。捲軸自訂的 CSS 程式碼通常只有幾十行，檔案大小可能不到 1KB。除非你在捲軸上使用了非常複雜的漸層或多層陰影，否則對渲染效能的影響微乎其微。比起捲軸 CSS，圖片未壓縮、未啟用 SG Optimizer 快取外掛、主機回應速度慢這些因素對網站速度的影響大了不知道多少倍。如果你擔心網站速度，不如先檢查你的主機方案是否需要升級，或者考慮遷移到像 SiteGround、A2 Hosting 或 DreamHost 這類效能更好的主機服務商。