WordPress如何添加滚动条功能效果

一些站长喜欢滚动条功能，想把这个加在WordPress网站上。在便捷性和外观上都具有独特性，也可以借此达到吸引用户的目的。这一效果其实不难实现，看下面教程
 

方法1、使用插件添加滚动条

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

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

插件名称：Advanced Scrollbar

下载地址：https://wordpress.org/plugins/advanced-scrollbar/

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

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

还可以选择是要自动隐藏滚动条，还是始终显示滚动条。可以选择“仅光标”选项，该选项将显示滚动条轨，但不显示按钮。
 

方法2、使用CSS自定义滚动条颜色

此方法使用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属性。

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