在 WordPress 中創建自定義滾動條的快速方法

可以肯定地說，無論出於何種原因，您都希望您的網站脫穎而出。 擁有這樣一個平台將確保您在訪客心目中停留的時間更長，這幾乎完全是一件好事。 除了您網站上的內容外，另一種吸引人們注意您的產品的方式是視覺方面。 這絕不是一個新知識。 麥當勞紅黃相間，臉書藍是有原因的。 但是，在這裡，我們將討論您的網站提供的一小部分體驗。 這是一個看起來不太重要的部分，但我們相信它仍然有它的價值——滾動條。 在以下幾行中，您將學習一些在 WordPress 中創建自定義滾動條的快速方法。

在 WordPress 中創建自定義滾動條的簡單方法

創建自定義滾動條是為您的網站製作自定義主題的重要步驟。 因此，如果您有興趣讓您的網站在各個方面都脫穎而出，讓我們向您介紹使滾動條獨一無二的第一種方法。

使用插件在 WordPress 中添加自定義滾動條

與您想在 WordPress 中做的大多數事情一樣，使用插件作為創建光滑滾動條的一種方式是一條不錯的道路。 強烈建議大多數用戶使用此方法的原因是它的簡單性。 只需單擊幾下，您就會發現自己正在查看與您的風格相匹配的滾動條。 不過，值得一提的是這種方法帶來的一個小缺陷。 也就是說，這個插件不支持移動瀏覽器。 但是，如果這看起來沒有太大損失，請繼續閱讀。

首先，您需要安裝並激活高級滾動條插件。 這個動作很簡單：

1. 訪問插件，然後轉到 WordPress 管理區域內的添加新頁面。 在搜索欄中輸入所述插件的名稱，然後按 Enter。
2. 找到插件後，單擊“立即安裝”按鈕。 然後 WordPress 將為您下載並安裝插件。 在此之後，您將能夠注意到“立即安裝”按鈕已更改為“激活”按鈕。
3. 單擊該“激活”按鈕，您就可以開始了。

現在您已經安裝並激活了必要的插件，您將不得不對其進行配置。 雖然這個詞可能聽起來很嚇人，但這個過程非常簡單。 只需轉到設置>自定義顏色滾動條設置。 在那裡，您將能夠更改滾動條的顏色，以及它的軌道背景顏色。 然後您可以選擇鼠標滾動步長，這將是鼠標滾輪的滾動速度。 這個插件的另一個優點是它允許您選擇是要自動隱藏滾動條還是始終顯示它。

您還可以選擇“僅光標”選項，這將顯示沒有按鈕的滾動條。 在此之下，您將能夠找到設置滾動速度、更改軌道對齊（左或右）和啟用觸摸行為的選項。

在您完成所有選項、使用顏色並找到最適合您的風格和偏好的組合後，不要忘記單擊“保存更改”按鈕，以存儲所有這些工作。 這樣做後，您可以訪問您的網站以查看那些華麗的自定義滾動條顏色。

使用 CSS 在 WordPress 中添加自定義滾動條顏色

正如您可以從字幕中推斷的那樣，此方法使用 CSS 來設置滾動條的樣式。 事實證明，這種方法比使用 jQuery 的方法更快。 但是，重要的是要提到它僅適用於使用 WebKit 渲染引擎（如 Google Chrome、Safari 和 Opera）的桌面瀏覽器。 不幸的是，它不會對移動瀏覽器或台式計算機上的 Firefox 和 Edge 產生任何影響。 話雖如此，如果這是您熱衷於選擇的選項，那麼這就是解決方法。

首先轉到主題>自定義頁面。 此操作將啟動 WordPress 主題定制器界面。 您將能夠看到您的網站的實時預覽，其中包含屏幕左側平面上的一系列選項。 通過單擊左側窗格中的 Additional CSS 選項卡繼續。 該選項卡將向您顯示一個簡單的框，您可以在其中添加自定義 CSS。 一旦您添加了有效的 CSS 規則，您就會看到它應用於您網站的實時預覽窗格。 至於有效的 CSS 規則，您應該添加以下內容以使滾動條易於更改：

::-webkit-滾動條 {

-webkit-外觀：無；

}

::-webkit-滾動條 {

寬度：10px；

}

::-webkit-滾動條軌道 {

背景：#ffb400；

borger：1px 實心#ccc；

}

::-webkit-scrollbar-thumb {

背景：#cc00ff；

borger：1px 實心#eee；

高度：100px；

邊框半徑：5px；

}

::-webkit-scrollbar-thumb:hover {

背景：藍色；

請記住，您使用主題定制器添加的任何自定義 CSS 僅適用於該特定主題。 如果您碰巧更改了主題但想保留該自定義滾動條，則必須使用相同的方法將該 CSS 規則復制並粘貼到新主題中。

儘管這是使您的網站脫穎而出的好方法，但我們不得不提到在 WordPress 中創建自定義滾動條的一個缺點。 也就是說，默認情況下，CSS 不附帶允許您更改滾動條屬性的規則集。 有一些建議可以添加此選項，但目前大多數瀏覽器都不支持它們。 為了克服這個問題，設計人員和開發人員使用特定於瀏覽器的偽元素或 JavaScrip 來覆蓋默認滾動條外觀。 這些是我們向您描述的技術。 不過，您必須記住，您必須使用不同的瀏覽器和設備測試您的網站，以確保它在所有瀏覽器上都能正常運行。 一旦你了解了這一點，可以肯定地說你知道如何在 WordPress 中創建自定義滾動條。