今天我们介绍下关于如何通过CSS修改浏览器滚动条样式,贴出示例代码,大家可以继续往下学习。
这里的内容有一个概念:包括滑动块和滑动条导轨。很多公司的项目会用到这个效果。至少需要兼容各浏览器,熟知内核特点,实现修改设置滚动条样式。
滚动条组成
浏览器滚动条,其css 样式由三部分组成:
1、::-webkit-scrollbar ? 定义滚动条整体样式;
2、::-webkit-scrollbar-thumb ?滑块;
3、::-webkit-scrollbar-thumb ?轨道;
代码体现
HTML 代码部分:
web 前端中文站
CSS代码部分:
.innerWeb{
width: 265px;
height: 400px;
position: absolute;
top: 33px;
left: 13px;
/*cursor: pointer;*/
overflow:hidden;
}
.innerboxHtml{
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: .7rem;
font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
height: 100%;
}
/*滚动条样式*/
.innerboxHtml::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.innerboxHtml::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerboxHtml::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
IE 浏览器的滚动条
对滚动条的定义,最早可追溯到 IE5.5,下图就是整理出来的各 IE 版本对滚动条支持的情况:
IE 浏览器滚动条支持情况
为了让大家对滚动条的实现原理及结构有更一步认识,从而使自定义设置滚动条样式的操作更加熟练,给大家用图讲解下:
webkit 内核的浏览器滚动条
对于 webkit 内核的浏览器,最常见就是 360 浏览器,其他可见“八大 webkit 内核的浏览器”。
其元素组成如下:
CSS代码:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
FireFox 浏览器滚动条
对于 FireFox 浏览器滚动条,目前还没有什么有效方法设置滚动条样式。大家有方法可以评论分享交流下。
至此,给大家介绍的CSS自定义修改浏览器滚动条样式的方法差不多结束了。大家可以收藏本网站,在项目,练习或者查阅的时候可以复习下,温故而知新。扩展:有一些是 jQuery 的滚动条效果,见《JQUERY 随滚动条滚动效果 (固定版)》大家可以扩展学习下。
web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS 修改浏览器滚动条样式 自定义修改方法 代码实例介绍