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

2019年7月27日07:52:49 3

怎样在WordPress中添加自定义滚动条?下面介绍2种方法在WordPress中添加自定义滚动条。

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

自定义滚动条颜色

默认情况下,CSS不附带更改滚动条属性的规则集。有建议可以添加,但目前大多数浏览器都不支持。

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

下面将介绍这两种技术。但是,必须使用不同的浏览器和设备进行测试,确保它在所有浏览器上都能正常运行。

 

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

对于大多数用户来说,此方法更容易并且建,但是,它不支持移动浏览器。

首先,需要安装并激活Advanced Scrollbar插件。

插件名称:Advanced Scrollbar

插件地址:https://wordpress.org/plugins/advanced-scrollbar/

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

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

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

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

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

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

在此之下,您将找到设置滚动速度,更改导轨对齐(左侧或右侧)以及启用触摸行为的选项。

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

 

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

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

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

它对桌面计算机上的移动浏览器或Firefox和Edge没有任何影响。

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

  1. ::-webkit-scrollbar {
  2.     -webkit-appearance: none;
  3. }
  4. ::-webkit-scrollbar {
  5.   width10px;
  6. }
  7. ::-webkit-scrollbar-track {
  8.   background#ffb400;
  9.     border:1px solid #ccc;
  10. }
  11. ::-webkit-scrollbar-thumb {
  12.   background#cc00ff;
  13.     border:1px solid #eee;
  14.     height:100px;
  15.     border-radius:5px;
  16. }
  17. ::-webkit-scrollbar-thumb:hover {
  18.   backgroundblue;
  19. }

随意更改颜色和其他CSS属性。

一旦确认满意,不要忘记保存更改。之后,您可以在支持的浏览器中进行预览。

这是在Mac计算机上使用Google Chrome浏览器查看我们的演示网站时的样子。

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

©里维斯社,本站推荐使用的主机:阿里云腾讯云;本站推荐使用的WP主题:WordPress主题

晨会游戏

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  2   博主  1

    • avatar 奶爸de笔记 5

      你翻译的真快啊,我也看到这篇文章了的。

      • avatar wordpress建站吧 4

        习惯默认的样式,改了总感觉花里胡哨