基本特性
属性
| 值 | 描述 |
|---|---|
| visible | 默认值 。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 超出的部分会被隐藏，且其余内容是不可见的。 |
| scroll | 内容会被修剪，但浏览器会显示滚动条以便查看其余的内容。 |
| auto | 若内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 从父元素继承 overflow 属性的值。 |
在CSS3中有
| 值（IE8+） | 描述 |
|---|---|
| overflow-x : hidden | 水平方向被隐藏，垂直方向auto |
| overflow-y : hidden | 垂直方向被隐藏，水平方向auto |
要注意的是：
当 x,y 不同，一个值是 visitble，一个是 hidden/scroll/auto，那么 visible 会被重置为 auto 。
兼容性
- 滚动条的样式各浏览器不同
- 宽度设定机制
例：
div.box > div.content`
.box{width:400px;height:100px;overflow:auto;}
.content{width:100%;height:200px;background-color:#eee}
IE7 会出现横向滚动条，因为其将.content的宽度直接设为了400px;
随着竖直滚动条的出现，会占用容器的一部分空间，于是出现了横向滚动条。
作用条件
- 非 display:inline
- 方位尺寸的限制
width / height / max-widht / max-height / absolute 拉伸 - 对于单元格td等，还需要 table 为 table-layout：fixed状态才行
滚动条
出现的条件
- overflow:auto / overflow:scroll
- 尺寸超出容器限制
- 无论什么浏览器，滚动条均来自<html> 而不是<body>
body:默认有0.5em margin值(约为8像素)，但滚动条是紧贴浏览器边缘
默认滚动条
- IE7
类似 html { over-flow-y : scroll } - IE8+
html { overflow : auto }
====> 因此，html{ overflow:hidden }可以去除默认滚动条
获取滚动高度
//Chrome
document.body.scrollTop
//other
document.documentElement.scrollTop;
var st = document.body.scrollTop || document.documentElement.scrollTop
获取滚动条宽度
- 滚动条会占用容器的宽度和高度
例
div.box>div#in
#box{width:400px;overflow:scroll;}
#in{*zoom:1/*for IE7*/}
console.log(400-document.getElementByid("in").clientWidth);
结果:IE7+/Chrome/FireFox(win7) - 17px
自定义滚动条
| 部位 | 属性名 |
|---|---|
| 整体部分 | ::-webkit-scrollbar |
| 两端按钮 | ::-webkit-scrollbar-button |
| 外层轨道 | ::-webkit-scrollbar-track |
| 内层轨道 | ::-webkit-scrollbar-track-piece |
| 滑动滑块 | ::-webkit-scrollbar-thumb |
| 边角 | ::-webkit-scrollbar-corner |
例子
::-webkit-scrollbar{
/*血槽宽度*/
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb{
/*拖动条*/
background-color:rgba(0,0,0,.3)
border-radius:6px
}
::-webkit-scrollbar-track{
background-color:#ddd;
border-radius:6px;
}
插件
jQuery 滚动条自定义插件(IE8+)
项目页面
Github地址
BFC
能形成BFC的 overflow 属性
- overflow ：visible ×
- overflow : auto √
- overflow : scroll √
- overflow : hidden √
应用
- 清除内部浮动影响
（overflow:scroll | hidden | auto 父元素高度恢复 --- IE7+）
①
/*无法整站通用*/
.clearfix{overflow:hidden; _zoom:1;}
②
.clearfix{*zoom:1;}/*IE6,7*/
.clearfix:after{content:"";display:table;clear:both;}/*IE8*/
-
避免margin穿透问题
自身元素BFC化 -
两栏自适应布局
两栏自适应布局
①
img.left (左浮动)
div.right > img*2
div.right {overflow : hidden}
原理：div.right形成了BFC，div.right 的位置不会和 img 重合，故无论div里面的元素怎么样，都跟外面没有任何关系
缺点：但“溢出不可见”，无法广泛应用
②
仅适用于block元素
<div class="cell">你好</div>
<div class="cell">你好</div>
.cell{
display:table-cell; width:2000px; //IE8+ BFC
*display:inline-block; //IE7- 伪BFC
*width:auto;
}
依赖overflow的样式表现
resize
要在overflow值不是visible时生效
| 属性值 | 效果 |
|---|---|
| resize:both | 水平垂直两边拉 |
| resize:horizontal | 水平方向拉 |
| resize:vertical | 垂直方向拉 |
文本溢出，省略号表示
text-overflow:ellipsis
overflow:hidden;
overflow 与 absolute
absolute 元素不总是被父级 overflow 属性剪裁，尤其当 overflow 在绝对元素及其包含块之间的时候
包含块：指的是含有position：relative / absolute / fixed 生命的父级元素，没有则是 body
body
div.overflow
img.absolute
解决办法：
- overflow 元素自身为包含块
- overflow 元素子元素为包含块
- 任意合法 transform 声明当包含块
overflow 子元素 transform(ie9)
自身 transform （仅仅ie9+/firefox）
锚点定位
本质
- 出发锚点定位
- 锚点定位通过scrollTop值改变向上偏移定位
- 毛元素的上边缘和可滚动溶气起上边缘对齐
触发
- url地址中的锚链与锚点元素
- 可focus的锚点元素处于focus状态
div.box > div.list#one*4
div.link >
a.click#one
a.click#two
a.click#three
a.click#four
.box {overflow:hidden}
存在的问题
- padding-bottom 缺失
.box{width:400px;height:100px;padding:100px 0;overflow:auto;}
Chrome下依旧可以滚动，导致获取的 scrollTop 值不一样
能解决的问题
- 水平居中跳动问题
.container{width:1150px;margin:0 auto;}
两种修复方法：
①
html{overflow-y:scroll;} //默认显示滚动条
②
.container{padding-left:calc(100vw - 100%);} //IE9+
100vw - 浏览器宽度;
100% - 可用内容宽度
- 解决 IE7 浏览器下文字越多，按钮两侧padding留白越大问题
/*给按钮增加*/
oberflow ： visible
网友评论