• 欢迎访问 流觞·曲水,WordPress教程,技术,分享,天文,古风,软件···
  • 推荐使用Firefox浏览器或Chrome浏览器访问本网站
  • 欢迎来到流觞·曲水O(∩_∩)O~~
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏流觞·曲水

WordPress自定义浏览器滚动条CSS样式

WordPress自定义浏览器滚动条CSS样式
经常看到别的网站的垂直滚动条挺好看的,于是乎自己也就折腾了一下,挺简单的几行css,如果你也想拥有更美观的滚动条。就复制下面的css代码加在你的style.css文件里就可以了,具体的样式可以设置,挺简单的。

只支持webkit内核的浏览器(也就是不支持ie和火狐)

下面上代码:

/*---滚动 条默认显示样式--*/  
::-webkit-scrollbar-thumb{  
   background-color:#D3D3D3;  /*默认状态下的滚动 条颜色*/
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #eee; /*默认状态下的滚动 条轮廓大小及颜色*/
   -webkit-border-radius:3px; /*默认状态下的滚动 条圆角*/
   border: 1px solid #eee; /*默认状态下的滚动边框大小及颜色*/ 
}  
 
/*---鼠标点击或滑过滚动 条显示样式--*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#B1B1B1;  /*鼠标滑过的滚动 条轮廓大小及颜色*/
   height:50px;   
   -webkit-border-radius:3px;  /*鼠标滑过的滚动 条圆角*/
}  
 
/*---滚动 条大小--*/  
::-webkit-scrollbar{  
   width:13px;  
   height:8px;  
}  
 
/*---滚动框背景样式--*/  
::-webkit-scrollbar-track-piece{  
   background-color:#f8f8f8; /*滚动框背景颜色*/
   -webkit-border-radius:0;  
}

当然,你也根据注释可以自己修改颜色、大小、圆角之类的样式|´・ω・)ノ
CSS里面hover是设置鼠标放上链接的颜色,同样的,active也可以设置鼠标点击的颜色,只要到上面的代码添加如下代码就行了

::-webkit-scrollbar-thumb:active{  
   height:50px;  
   background-color:#000;  
   -webkit-border-radius:4px;  
}

如果,你觉得配色不够多?

请自行修改CSS中的配色
或在WordPress后台插件搜索关键词:Custom-scrollbar
下载启用开始high~


流觞·曲水 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress自定义浏览器滚动条CSS样式
喜欢 (6)
[847198075@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 开始hign? 拼错了吧?high?
    totoro625 2017-02-04 22:23 回复
加载中……