如何在 WordPress 中添加自定义滚动条

您想在 WordPress 中添加自定义滚动条吗?在为您的网站制作自定义主题时，更改滚动条的外观可以帮助您脱颖而出.

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

自定义滚动条颜色的问题

默认情况下，CSS 没有允许您更改滚动条属性的规则集.有一些建议添加此功能，但目前大多数浏览器不支持它们.

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

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

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

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

这种方法更简单，推荐给大多数用户.但是，它不支持移动浏览器.

首先，您需要安装并激活高级滚动条插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

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

从这里，您可以更改滚动条颜色和滚动条轨道背景颜色.然后可以选择鼠标滚动步长，即鼠标滚轮的滚动速度.

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

您可以选择"仅光标"选项，该选项将显示滚动条而不是按钮.

在其下方，您将找到用于设置滚动速度、更改导轨对齐方式(左或右)以及启用触摸行为的选项.

不要忘记点击保存更改按钮来存储您的设置.

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

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

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

但是，它仅适用于使用 Google Chrome、Safari、Opera 等 WebKit 渲染引擎的桌面浏览器.

它不会对移动浏览器或台式计算机上的 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 主题.