fbpx
Cloudways 主機【8折】專屬優惠

1 分鐘換上華麗網頁捲軸的配色方案,零技巧即套即用(CSS:Scrollbars)

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

相容於 85% 以上的訪客(Chrome + Safari 瀏覽器)

相容於 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 語法

自訂您的 CSS 語法

步驟一:點擊【附加的 CSS】

大部分 WordPress 佈景主題都是從這個入口,也有不少人稱呼這裡是【自訂 CSS】區域。

套上 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+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術