首页 > 其他 > 详细

chrome自定义滚动条样式

时间:2020-01-06 18:22:49      阅读:132      评论:0      收藏:0      [点我收藏+]

chrome内核浏览器可以修改滚动条样式,只需要几句css即可实现,下面列出常用的修改样式:

// 滚动条整体宽度
::-webkit-scrollbar { width: 8px; }
// 滚动条滑槽样式 ::
-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 8px; }
// 滚动条样式 ::
-webkit-scrollbar-thumb { border-radius: 8px; background: #ddd; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:hover{ background: #ccc; } ::-webkit-scrollbar-thumb:active{ background: #999; }
// 浏览器失焦的样式 ::
-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

chrome自定义滚动条样式

原文:https://www.cnblogs.com/neeter/p/12157422.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!