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

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

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

自定義滾動條顏色

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

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

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

LambdaTest – 瀏覽器相容性測試工具，檢測你的網站在所有平台裝置上的相容性

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

方法一

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

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

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

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

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

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

CloudAccess Free WordPress Hosting – 免費 WordPress 虛擬主機申請與免費一鍵安裝 WordPress & Joomla

方法二

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

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

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

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

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

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

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