wordpress网站添加自定义滚动条样式

发布时间:2018-09-25 22:37:15

今天在做导航站的时候,看到了设置自定义滚动条的样式,想着给自己的wordpress博客也加上个自定义滚动条样式,就了解了下CSS3的-webkit-scrollbar,我之前也看过CSS3的教程,没有发现这个属性,所以特意的收集了有关这个属性的资料,在此全部分享给大家,也加深下自己的印象,大家可以利用这个属性给任何一个网站自定义非常漂亮的滚动条样式。

wordpress网站添加自定义滚动条样式

一、自定义滚动条样式预览

二、滚动条的组成属性
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块,向上向下移动(这个取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track 滚动条的轨道,也包括上一个属性
::-webkit-scrollbar-button 滚动条的轨道两端的按钮,允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
::-webkit-scrollbar-corner 边角,即两个滚动条交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过手动调整元素大小的小控件
三、wordpress博客加个渐变的滚动条
将下面的代码加入到wordpress主题style.css样式中,就可以有渐变的滚动条了,如上面图片这样子的滚动条,更多滚动条设置请看上面的代码演示,根据滚动条的组成属性,自己为自己的网站添加颜色搭配的滚动条。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 10px;
height: 20px;
background-color: #F5F5F5;
}
/* 定义滚动条轨道 */
::-webkit-scrollbar-track
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
/* 定义滑块 */
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background: linear-gradient(to bottombottom, #3690cf, #17decf);
}
四、自定义滚动条更加全面的设置
我们上面用到的都是伪元素,我们平时用到的最多的:hover,:link这些是伪类,::first-line,::before,::after这些就是伪元素,和上面的滚动条伪元素一样,任何对象都可以设置边框、背景、阴影等,下面的这些伪类可以用到上面的伪元素中,贴出代码如下:

:horizontal
//horizontal伪类适用于任何水平方向上的滚动条
:vertical
//vertical伪类适用于任何垂直方向的滚动条
:grinning:ecrement
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮
:increment
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮
:confounded:tart
//start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面
:end
//end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面
:double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:confounded:ingle-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button
no-button伪类表示轨道结束的位置没有按钮。
:corner-present
//corner-present伪类表示滚动条的角落是否存在。
:window-inactive
//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”营销推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质 量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体营销推广吧,我们和你一起,开创互联网营销大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。