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

分类栏目:案例分享

61

一些站长喜欢滚动条功能,想把这个加在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属性。

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