您想在 wordpress 中添加自定義滾動條嗎？

更改滾動條的外觀可以幫助您的網(wǎng)站脫穎而出，特別是在您創(chuàng)建自定義 wordpress 主題時。它還可以吸引訪問者對滾動條的注意力，并鼓勵他們探索更多內(nèi)容。

在本文中，我們將向您展示如何在 WordPress 中輕松添加自定義滾動條。

為什么在 WordPress 中添加自定義滾動條？

2018 年，WC3 起草了一項提案，允許網(wǎng)站所有者使用 css 自定義滾動條的外觀。

如今，許多現(xiàn)代瀏覽器都支持自定義滾動條。

考慮到這一點，您可能需要更改滾動條以更好地適合您網(wǎng)站的配色方案或品牌。許多網(wǎng)站還使用自定義滾動條來吸引訪問者的注意力，這可以增加您的綜合瀏覽量并降低跳出率。

但是，請記住，每個瀏覽器處理自定義滾動條的方式都不同。許多瀏覽器僅部分支持自定義，而有些瀏覽器根本不會顯示您的自定義樣式。

這意味著使用不同的瀏覽器和設(shè)備測試您的網(wǎng)站非常重要，以了解滾動條在盡可能多的瀏覽器上的外觀。

話雖如此，我們來看看如何在 WordPress 中添加自定義滾動條。只需使用下面的快速鏈接跳轉(zhuǎn)到您要使用的方法：

• 方法 1：使用插件在 WordPress 中添加自定義滾動條（簡單）
• 方法 2：使用 CSS 在 WordPress 中添加自定義滾動條顏色

方法 1：使用插件在 WordPress 中添加自定義滾動條（簡單）

自定義滾動條的最簡單方法是使用Advanced Scrollbar。這個免費的插件可以讓您更改滾動條的寬度、顏色、滾動速度等，而無需編寫一行代碼。

您需要做的第一件事是安裝并激活高級滾動條插件。有關(guān)更多詳細(xì)信息，請參閱我們有關(guān)如何安裝 WordPress 插件的分步指南。

激活后，轉(zhuǎn)到“設(shè)置”?“高級滾動條設(shè)置”。

在這里，您可以更改滾動條的配色方案和導(dǎo)軌背景顏色。

在下圖中，我們創(chuàng)建了一個藍(lán)色滾動條。

您還可以通過在“鼠標(biāo)滾動步數(shù)”字段中輸入新數(shù)字來更改鼠標(biāo)滾動步數(shù)。

較低的數(shù)字將使您的網(wǎng)站滾動速度更慢，而較高的數(shù)字將使網(wǎng)站滾動速度更快。

您還可以選擇是否要自動隱藏滾動條，以便它僅在訪問者滾動時顯示。

如果您創(chuàng)建了更加豐富多彩的滾動條并擔(dān)心它可能會分散您對其余內(nèi)容的注意力，這可能會很有用。

默認(rèn)情況下，滾動條將出現(xiàn)在瀏覽器窗口的右側(cè)。如果您愿意，可以使用“導(dǎo)軌對齊”設(shè)置將其移動到左側(cè)。

當(dāng)您對滾動條的設(shè)置感到滿意時，請不要忘記單擊“保存更改”來存儲您的設(shè)置。

您現(xiàn)在可以訪問您的WordPress 網(wǎng)站來查看自定義滾動條的運行情況。

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

如果您想對滾動條進(jìn)行更高級的更改，那么另一個選擇是使用 CSS。

此方法允許您自定義滾動條的每個部分，但它僅適用于使用 webkit 的桌面瀏覽器。這意味著您的更改不會顯示在所有瀏覽器上，包括移動瀏覽器。

要使用 CSS 自定義滾動條，請轉(zhuǎn)到外觀 ? 自定義。

在 WordPress 定制器中，單擊“其他 CSS”。

您現(xiàn)在可以將代碼添加到出現(xiàn)的小編輯器中。

以下是更改滾動條外觀的代碼示例：

我們希望本文能幫助您了解如何在 WordPress 中添加自定義滾動條。您可能還想查看我們關(guān)于如何在 WordPress 中創(chuàng)建登陸頁面的指南，或者查看我們的專家精選的最佳拖放頁面構(gòu)建器。