在 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 中创建自定义滚动条。