ios overflow 样式 overflow滚动条样式

每当我们设置一个overflow: hidden; 内容超过了固定高度或者宽度，就会出现滚动条；而在每个浏览器的滚动条显示不一样，而且样式不够有特色性，这就需要我们来自定了。

overflow可设置的属性：

overflow:visible //默认值。内容不会被修剪，超出内容会显示在元素框之外

overflow:hidden //内容会被修剪。超出内容被隐藏

overflow:scroll //内容会被修剪，浏览器会显示滚动条以便查看其余内容

overflow:auto //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow:inherit //规定从该父元素继承overflow属性的值

其中overflow-x和overflow-y可设置水平和垂直的滚动

滚动条构成如图所示：

在谷歌浏览器则使用伪类改变默认样式：

1. ::-webkit-scrollbar  横竖滚动条整体部分

2. ::-webkit-scrollbar-thumb 滚动条里面的小方块

3. ::-webkit-scrollbar-track 滚动条的轨道

4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，可调整小方块的位置。

5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分

6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方

7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

 使用方法如下：

<div class="scroll">
    <p>内容</p>
    <p>内容</p>
</div>

<style>
   .scroll::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
   　　 border-radius: 10px;
  　　  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
   　　 background: #0185f4;
   }
</style>

 

在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	设置滚动条轨迹组成部分的颜色

 滚动条属性设置如图：

 使用方法如下：

<div class="scroll">
    <p>内容</p>
    <p>内容</p>
</div>

<style>
   .scroll {
    　　scrollbar-arrow-color: #01336c; /*三角箭头的颜色*/
   　　 scrollbar-face-color: #0185f4; /*立体滚动条的颜色（包括箭头部分的背景色）*/
    　　scrollbar-3dlight-color: #01336c; /*立体滚动条亮边的颜色*/
   　　 scrollbar-highlight-color: #01336c; /*滚动条的高亮颜色（左阴影？）*/
   　　 scrollbar-shadow-color: #0185f4; /*立体滚动条阴影的颜色*/
   　　 scrollbar-darkshadow-color: #01336c; /*立体滚动条外阴影的颜色*/
    　　scrollbar-track-color: #0a1f57; /*立体滚动条背景颜色*/
    　　scrollbar-base-color:#01336c; /*滚动条的基色*/
   }
</style>

而针对火狐浏览器的话，目前就没有使用css来控制，如果兼容所有的浏览器建议使用插件

参考：jQuery custom content scroller

如需自定义样式，则可找到相应的元素自定义控制