17713433920 info@mac163.com

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

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

自定义滚动条颜色的问题

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

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

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

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

如何在wordpress中添加自定义滚动条
如何在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主题而无需编写任何代码。


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


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

关闭搜索
购物车
回到顶部