浏览器滚动条样式

来源:互联网   编辑:思良  发表时间:2020-03-28  关注度:  

image.pngT3p桑客游

::-webkit-scrollbar //滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。(位置1)
::-webkit-scrollbar-button //滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。(位置2)
::-webkit-scrollbar-track  // 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置3)
::-webkit-scrollbar-track-piece  //内层轨道,滚动条中间部分(位置4)
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那部分(位置5)
::-webkit-scrollbar-corner //边角(位置6)
::-webkit-resizer //定义右下角拖动块的样式(位置7)

注意:对以上各个部分定义width,height时。有如下功能:若是水平滚动条,则width属性不起作用,height属性用来控制滚动条相应部分竖直方向高度;若是竖直滚动条,则height属性不起作用,width属性用来控制相应部分的宽度。T3p桑客游

在Chrome中,滚动条中的各个部分和DOM中块级元素是一样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。而{}中的属性,你就像控制一般块级元素一样简单(强大啊)。T3p桑客游

DEMO

image.pngT3p桑客游

CSS

#scroll-1 {
width:200px;
height:200px;
overflow:auto;
}
#scroll-1 div {
width:400px;
height:400px;
}
#scroll-1::-webkit-scrollbar {
width:10px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button {
background-color:#FF7677;
}
#scroll-1::-webkit-scrollbar-track {
background:#FF66D5;
}
#scroll-1::-webkit-scrollbar-track-piece {
background:#ff0000;
}
#scroll-1::-webkit-scrollbar-thumb{
background:#FFA711;
border-radius:4px;
}
#scroll-1::-webkit-scrollbar-corner {
background:#82AFFF;
}
#scroll-1::-webkit-scrollbar-resizer {
background:#FF0BEE;
}


HTML

<div id="scroll-1">
<div>
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)</div>
</div>


 T3p桑客游

IE浏览器css设置滚动条(看下表):

滚动条样式支持情况支持浏览器版本可否继承描述
scrollbar-3dlight-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-colorIE特有属性IE5.5+y设置滚动框和滚动条箭头的颜色
scrollbar-arrow-colorIE特有属性IE5.5+y设置滚动条箭头的颜色
scrollbar-shadow-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-colorIE特有属性IE5.5+y设置滚动条槽的颜色
scrollbar-base-colorIE特有属性IE5.5+y设置滚动条主要构成部分的颜色
scrollbar-track-colorIE特有属性IE5.5+y设置滚动条轨迹组成部分的颜色

FIREFOX浏览器css设置滚动条(参照如下连接):

http://bbs.kafan.cn/thread-1529981-1-1.htmlT3p桑客游

原文:https://www.w3cways.com/1670.html

    桑客游所有【原创】作品,均为站长手写代码。部分模板代码、教材来源于自互联网,

    如有侵权,出示著作权证书联系站长删除(微信在下面)。如果本站资源对你有用,感谢打赏!


下一篇:【原创】怎么用框架实现只显示“嵌入页面中间的某部分位置”


上一篇:【原创】按时间段调用不同CSS


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。