如何在WordPress中添加自定義滾動條


您是否要在WordPress中添加自定義滾動條? 更改滾動條的外觀可以幫助您在為網站創建自定義主題時特別突出。

在本文中,我們將向您展示如何輕鬆地在WordPress中添加自定義滾動條。 我們將向您展示兩種解決方案,您可以選擇一種最適合您的解決方案。

在WordPress中添加自定義滾動條

自定義滾動條顏色的問題

默認情況下,CSS不附帶允許您更改滾動條屬性的規則集。 有一些建議可以添加此內容,但目前大多數瀏覽器均不支持它們。

為了克服這個問題,設計人員和開發人員使用特定於瀏覽器的pseduo元素或JavaScript覆蓋默認的滾動條外觀。

我們將向您展示這兩種技術。 但是,請記住,必須使用不同的瀏覽器和設備測試站點,以確保其在所有瀏覽器上都能正常運行。

話雖如此,讓我們看一下如何在WordPress中添加自定義滾動條顏色。

方法1.在WordPress中使用插件添加自定義滾動條

此方法更簡單,建議大多數用戶使用。 但是,它不支持移動瀏覽器。

首先,您需要做的是安裝並激活Advanced Scrollbar插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要前往 設置»自定義顏色滾動條設置 頁面以配置插件。

滾動條的顏色和背景設置

在這裡,您可以更改滾動條顏色和滾動條軌道背景顏色。 然後,您可以選擇鼠標滾動步驟,即鼠標滾輪的滾動速度。

您還可以選擇是要自動隱藏滾動條還是始終顯示它。

您可以選擇“僅光標”選項,該選項將顯示滾動條,但不顯示按鈕。

滾動選項

在其下,您將找到用於設置滾動速度,更改導軌對齊(向左或向右)以及啟用觸摸行為的選項。

不要忘記單擊“保存更改”按鈕來存儲您的設置。

現在,您可以訪問您的網站以查看自定義滾動條的顏色。

自定義滾動條顏色預覽

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

此方法使用CSS設置滾動條的樣式,這比使用jQuery更快。

但是,它僅適用於使用WebKit呈現引擎的桌面瀏覽器,例如Google Chrome,Safari,Opera等。

它不會對移動瀏覽器或台式機上的Firefox和Edge產生任何影響。

您將需要在您的WordPress主題中添加以下自定義CSS。

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ffb400; 
	border:1px solid #ccc;
}

::-webkit-scrollbar-thumb {
  background: #cc00ff; 
	border:1px solid #eee;
	height:100px;
	border-radius:5px;
}

::-webkit-scrollbar-thumb:hover {
  background: blue; 
}

隨時更改顏色和其他CSS屬性。

滿意後,請不要忘記保存更改。 之後,您可以在受支持的瀏覽器中預覽它。

這是在Mac計算機上的Google Chrome瀏覽器上觀看演示網站時的樣子。

滾動條自定義顏色預覽

我們希望本文能幫助您學習如何在WordPress中添加自定義滾動條。 您可能還想查看我們的指南,該指南介紹如何輕鬆創建自定義WordPress主題而無需編寫任何代碼。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。