您要在WordPress中添加自定义滚动条吗？更改滚动条的外观可以帮助您在为网站创建自定义主题时特别突出。

在本文中，我们将向您展示如何轻松地在WordPress中添加自定义滚动条。我们将向您展示两种解决方案，您可以选择一种最适合您的解决方案。

自定义滚动条颜色的问题

默认情况下，CSS不附带允许您更改滚动条属性的规则集。有一些建议可以添加此内容，但目前大多数浏览器均不支持它们。

为了克服这个问题，设计人员和开发人员使用特定于浏览器的pseduo元素或JavaScript覆盖默认的滚动条外观。

我们将向您展示这两种技术。但是，请记住，必须使用不同的浏览器和设备测试站点，以确保其在所有浏览器上都能正常运行。

话虽如此，让我们看一下如何在WordPress中添加自定义滚动条颜色。

方法1.在WordPress中使用插件添加自定义滚动条

此方法更简单，建议大多数用户使用。但是，它不支持移动浏览器。

首先，您需要做的是安装并激活Advanced Scrollbar插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要转到“设置”»“自定义颜色滚动条设置”页面来配置插件。

在这里，您可以更改滚动条颜色和滚动条导轨背景颜色。然后，您可以选择鼠标滚动步骤，即鼠标滚轮的滚动速度。

您还可以选择是要自动隐藏滚动条还是始终显示它。

您可以选择“仅光标”选项，该选项将显示滚动条，但不显示按钮。

在其下，您将找到用于设置滚动速度，更改导轨对齐（向左或向右）以及启用触摸行为的选项。

不要忘记单击“保存更改”按钮来存储您的设置。

现在，您可以访问您的网站以查看自定义滚动条的颜色。

方法2.使用CSS在WordPress中添加自定义滚动条颜色

此方法使用CSS设置滚动条的样式，这比使用jQuery更快。

但是，它仅适用于使用WebKit呈现引擎的桌面浏览器，例如Google Chrome，Safari，Opera等。

它不会对移动浏览器或台式机上的Firefox和Edge产生任何影响。

您需要将以下自定义CSS添加到WordPress主题中。

::-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主题而无需编写任何代码。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！