如何在 WordPress 中自定義滾動條？兩個方法教你快速設定！ - TechMoon 科技月球

你是否想要在自己的 WordPress 當中，客製化側邊的滾動條？讓你的網站有別於其他網站，創造帶有你個人風格的網站樣式。

在今天的教學當中，將會教大家如何在 WordPress 當中輕鬆的實現自定義滾動條，有兩種解決方案可以讓我們快速的達成這個效果。你可以根據你的喜好，選擇其中一種方式實現。

自定義滾動條顏色

在預設的情況下，我們無法在 CSS 當中更改滾動條的屬性。雖然有一些方案可以讓我們達成我們想要的功能，但目前為止，大多數的瀏覽器都不支援，因此暫且不提。

為了解決這個既有問題，一般來說我們會使用特定瀏覽器的「偽元素」或是「JavaSciprt」來覆蓋原始的滾動條外觀。

以下將分別帶來「偽元素」與「JavaScript」兩種不同的技術。但是，由於在不同的瀏覽器與設備環境下，這些效果可能會有些許的不同。因此，在你完成後，請使用各種不同的瀏覽器與設備進行相容性測試，確保你的設定在所有環境下都能正常顯示。

接著就讓我們來看看，到底該怎樣才能在 WordPress 中添加客製化的滾動條顏色。

方法一

利用外掛在 WordPress 中加入自定義滾動條

對於大多數的人來說，使用 WordPress 外掛式是較容易的方式。

Advanced scrollbar

Author(s): 1infosoft

Current Version: 1.0

Last Updated: 2019-06-28

advanced-scrollbar.zip

0%Ratings 300+Installs 3.0.1Requires

第一個 WordPress 外掛叫做「Advanced scrollbar」 ，安裝完成並啟用後，前往「設定」→「Custom Color scrollbar Settings」，或是直接由「Custom color scrollbar」進入此外掛的設定頁面。

Advanced scrollbar 設定畫面

在此外掛的設定頁面當中，你可以決定滾動條的顏色與背顏色，同時還可以改變滑鼠滾輪的滾動速度。

設定完成之後，可以看到現在網站的滾動條已經改變了。

自定義滾動條外觀結果

如果你想要建立一個免費 WordPress 網站來測試，可以參考我們之前的免費 WordPress 主機介紹。

方法二

利用 CSS 在 WordPress 中自定義滾動條顏色

在網頁設計當中，我們可以直接使用 CSS 來設定滾動條的樣式。但注意，這個方式目前僅適用於 Google Chrome、Safari、Opera…等等，使用 WebKit 渲染引擎的瀏覽器，如果你在行動裝置上的瀏覽器，或在 Firefox 瀏覽器當中觀看，此效果有可能不會顯示。

你只需要將以下 CSS 程式加入你的 CSS 樣式當中。

你可以隨意的替換其中的顏色或是陰影等屬性。

根據你的 WordPress 佈景主題的不同，有些主題會提供自定義 CSS 的區塊，你就可以在後台編輯時，及時預覽滾動條的呈現效果：

使用 CSS 自定義滾動條樣式

希望今天的內容能夠幫助你了解如何在 WordPress 當中自定義滾動條的外觀。如果你希望看到更多好用的 WordPress 佈景主題，繼續閱讀我們的 WordPress 主題介紹。

如果你喜歡今天這篇教學文章，歡迎追蹤我們的 Facebook 與 Instagram。有任何問題歡迎在下方留言，我們會盡快回覆給你。

猜你喜歡

• 6 個實用的小技巧，告別 WordPress 網站速度變慢的問題，加速你的 WP 網站
• 2019 Hostinger 7 月 - 1 折 90% Off 購買註冊教學 + WordPress 安裝教學，一鍵 WordPress 快速安裝教學
• 如何在 WORDPRESS 中自動顯示 WEBP 圖片格式
• [2019] 15 個 WordPress Newsletter 電子報訂閱外掛
• WooCommerce 是什麼？WooCommerce 中文懶人包，免費利用 WooCommerce 外掛建立購物車系統
• 14 個最佳 WordPress Cache Plugins 緩存快取外掛推薦 - 2019 免費/付費通通有
• 如何修復在 WordPress 當中「503 Service Unavailable Error」的問題？
• 如何快速在 WordPress 中啟用 GZIP 資料壓縮功能
• DemosWP - 免費快速建立 WordPress 測試網站，提供 SSL、phpMyAdmin 與 SFTP 功能
• WordPress 是什麼？新手入門教學 - 深入淺出帶你了解什麼是 WordPress 網站