滚动条显示规则
overFlow-x: scroll ;
overFlow-y: hidden ;
可用属性:
visible:(默认)对溢出内容不做处理,内容可能会超出容器。
hidden:隐藏溢出容器的内容且不出现滚动条。
scroll:隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
auto:当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
参考:
http://www.css88.com/book/css/properties/layout/overflow-x.htm
谷歌下自定义滚动条
参考: http://www.w3cways.com/1670.html
//滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。(位置1)
::-webkit-scrollbar
//滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。(位置2)
::-webkit-scrollbar-button
// 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置3)
::-webkit-scrollbar-track
//内层轨道,滚动条中间部分(位置4)
::-webkit-scrollbar-track-piece
//滚动条里面可以拖动的那部分(位置5)
::-webkit-scrollbar-thumb
//边角(位置6)
::-webkit-scrollbar-corner
//定义右下角拖动块的样式(位置7)
::-webkit-resizer
注意:
对以上各个部分定义width,height时。
有如下功能:若是水平滚动条,则width属性不起作用,height属性用来控制滚动条相应部分竖直方向高度;
若是竖直滚动条,则height属性不起作用,width属性用来控制相应部分的宽度。在Chrome中,滚动条中的各个部分和DOM中块级元素是一样的。
通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。
而{}中的属性,你就像控制一般块级元素一样简单(强大啊)。
html
<div id="scroll-1">
<div>
CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条
CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条
CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条
CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条
CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条
</div>
</div>
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;
}
IE下自动与滚动条
滚动条样式 | 支持情况 | 支持浏览器版本 | 可否继承 | 描述 |
scrollbar-3dlight-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头左上边缘的颜色 |
scrollbar-highlight-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头左上边缘的颜色 |
scrollbar-face-color | IE特有属性 | IE5.5+ | y | 设置滚动框和滚动条箭头的颜色 |
scrollbar-arrow-color | IE特有属性 | IE5.5+ | y | 设置滚动条箭头的颜色 |
scrollbar-shadow-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头右下边缘的颜色 |
scrollbar-dark-shadow-color | IE特有属性 | IE5.5+ | y | 设置滚动条槽的颜色 |
scrollbar-base-color | IE特有属性 | IE5.5+ | y | 设置滚动条主要构成部分的颜色 |
scrollbar-track-color | IE特有属性 | IE5.5+ | y | 设置滚动条轨迹组成部分的颜色 |
scrollBar-face-color: green;
scrollBar-hightLight-color: red;
scrollBar-3dLight-color: orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;