[CSS]滚动条
2017-04-20 17:21
225 查看
滚动条显示规则
可用属性:
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时。
有如下功能:
若是水平滚动条,则width属性不起作用,height属性用来控制滚动条相应部分竖直方向高度;
若是竖直滚动条,则height属性不起作用,width属性用来控制相应部分的宽度。
在Chrome中,滚动条中的各个部分和DOM中块级元素是一样的。
通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。
而{}中的属性,你就像控制一般块级元素一样简单(强大啊)。
html
css:
IE下自动与滚动条
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;
相关文章推荐
- Study Html《div 显示滚动条的CSS代码》
- CSS滚动条样式修改
- css加滚动条样式
- [转载 css]用CSS调整scrollbar(滚动条)的配色
- DIV 加 CSS(overflow: auto;)定义来制作 scroll bar 滚动条效果
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
- 使用 css 设置文本不换行 添加滚动条
- css 设置超过一定像素出现滚动条
- div+css中如何将层随着滚动条的移动的初始位置固定在导航栏左下方
- css解决滚动弹出层里边的滚动条时带动了整个页面滚动的问题
- 悬停效果 静止不动 不随滚动条滚动 纯css实现
- CSS 控制出现滚动条
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
- css设置背景图片不随滚动条滚动;background-attachment使用
- css改变滚动条样式
- 【转】CSS滚动条样式说明
- CSS设置滚动条样式(兼容IE)
- CSS自定义滚动条样式
- css中滚动条设置
- 用CSS定义IE滚动条颜色