css改火狐滚动条样式_CSS修改浏览器滚动条样式 自定义修改方法 代码实例介绍...

今天我们介绍下关于如何通过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 修改浏览器滚动条样式 自定义修改方法 代码实例介绍