大家在瀏覽網頁時,有沒有發現右方【灰色和平平無奇的網頁捲軸】很單調,和網站的整體風格不是太塔和配合,其實您可以輕鬆複制貼上【數行程式碼】,就能一口氣改調每頁都出現的網頁捲軸配色。個性化和統一您公司網站的風格排版,這篇教學文章把複雜的步驟移除掉,新手只需要挑選【合適的配色】,然後把【CSS 程式碼】複制貼上到您網站的【自訂 CSS】區域即可生效,簡單易用的小技巧呢!
相容於 85% 以上的訪客(Chrome + Safari 瀏覽器)

由於這個做法並不能相容於全世界的瀏覽器,但也覆蓋極大多數使用者,跟據權威統計公司 StatCounter(全球瀏覽器市佔率 2020 年)的數據,Chrome + Safari 瀏覽器佔 約佔 85% 以上的訪客,所以大家可以放心使用,因為這個 CSS 只會改變網頁捲軸的配色,而非令其失效,沒有任何壞影響的。
瀏覽器 (市佔率) | 相容性 |
---|---|
Chrome (63.59%) | 相容 |
Safari (19.14%) | 相容 |
Firefox (3.76%) | 不相容 |
Edge (3.41%) | 不相容 |
Samsung Internet (3.31%) | 不相容 |
Opera (2.19%) | 不相容 |
在不相容瀏覽器時,會變回原本的樣式
由於只是【外觀】上的差異,在遇上不相容瀏覽器時,並不會影響任何功能性的阻礙,但網頁捲軸的外觀會變回預設平平淡淡的【灰色】,影響不大。
前往可以讓您修改 CSS 的地方

步驟一:網站後台 –> 外觀 –> 自訂
一般最快前往【自訂】就是這樣前往,當然您可以從上方黑色管理區域直接前往【自訂】
自訂您的 CSS 語法

步驟一:點擊【附加的 CSS】
大部分 WordPress 佈景主題都是從這個入口,也有不少人稱呼這裡是【自訂 CSS】區域。
套上 CSS 語法,完成!

步驟一:從這篇文章下方選擇喜歡的樣式
推薦您跟據自身公司的【品牌色】去選擇顏色,如沒有相關的建議,可以參考這篇文章下方的 CSS 樣式,複制語法後貼上即可。
步驟二:Save 保存您的設定
如果滿意色調,請按 Save 保存您的設定就完成,沒有更多步驟了,恭喜。
複制以下語法,貼上自訂 CSS 區域

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #f7d3db;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #d6586d;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
優雅紫色:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #2b1f43;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #c4bbfa;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
藍白海浪:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #002e65;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #aec3d7;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
綠色自然:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #204c02;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #a4d056;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
火焰:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #940c00;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #f62f06;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
黃花:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #d57600;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #f2c800;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
藍天白雲:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #448fc8;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #e1e5e8;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
森林:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #385849;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #d5d2b1;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
藍色糖果:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #3cbdd0;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #8eebf2;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
藍色裝飾:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #437c97;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #c7bba5;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
黃色夕陽:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #c77055;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #ffe694;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
青色檸檬:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #427800;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #ceeaaf;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
綠色水母:

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
width: 30px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
background: #03141e;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
background: #4bc58a;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}
參考資料和引用文獻
立即訂閱我們的網站
我們的團隊並不會濫發信息和廣告,每月定期會整理優惠和 WordPress 相關的更新情報,例如系統、外掛和佈景主題相關的更新,也會推送資訊安全的漏洞注要事項,確保您的網站保持和世界的連繫。
加入免費學習社團
學員人數:4,400+ 人(持續增加之中)
