CSS深入理解之overflow 笔记

2017-11-14 本文已影响499人 soojade

Overflow基本属性

visible(默认)
hidden
scroll
auto
inherit

假如overflow-x和overflow-y值相同，则等同于overflow；

假如overflow-x和overflow-y值不同，其中一个值，如overflow-x设置为hidden/scroll/auto中的一个，那么overflow-y的值是visible或没有设置时，会重置为auto。

overflow 起作用的前提条件

display不是inline;
对应方位的尺寸限制。width/height/max-width/max-height或absolute拉伸;
对于单元格td等，还需要table为table-layout:fixed状态;

Oveflow 与滚动条

无论什么浏览器，默认滚动条都来自于<html>元素，而非<body>。所以要想去除页面的滚动条只需要html { overflow: hidden; }。

获取滚动高度

chrome浏览器：document.body.scrollTop;
其它浏览器：docuent.documentElement.scrollTop;

所以推荐使用：

let st = document.body.scrollTop || document.documentElement.scrollTop;

滚动条会占用容器的可用宽度或高度。overflow:auto在固定宽高的的布局中，出现滚动条，破坏原本和谐的布局，应用在自适应布局中。

水平居中跳动问题

.container { width: 1150px; margin: 0 auto; }设置水平居中，当页面出现滚动条时，出现页面偏移现象，如下图：

水平居中跳动问题修复

html { overflow-y: scroll; } 滚动条一直存在影响美观；
.container { padding-left:calc(100vw-100%);}即 浏览器宽度 - 可用内容宽度；

Overflow 与块状格式上下文(BFC)

当overflow的值为auto/scroll/hidden时，可以触发BFC。常见应用如下：

清除浮动影响；

更广泛的清除浮动影响使用伪元素：
.clearfix:after{ content: ''; display: table; clear: both;}

避免margin穿透问题；
两栏自适应布局；

BFC由于自身特性，具体表现不一：

overflow：hidden自适应，但“溢出不可见”限制应用场景;
float+float：包裹性+破坏性，无法自适应，块状浮动布局;
position：absolute脱离文档流，自娱自乐;
display：inline-block 包裹性，无法自适应;
display：table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应;

广为流传的两栏自适应布局如下：

.cell {  /*IE8+ BFC特性*/
  display: table-cell;
 width:2000px; /*设置超过外部容器宽度的数值*/

Overflow 与 absolute 绝对定位

绝对定位元素不总是被父级 overflow 属性剪裁，尤其当 overflow 在绝对定位元素及其包含块之间的时候。即 overflow 在绝对定位元素及其包含块之间时失效。

包含块指：含position:relative/absolute/fixed声明的父级元素，没有则指 body 元素。

避免 overflow 失效：

overflow 元素自身为包含块，即添加属性position:relative/absolute/fixed；
overflow 元素的子元素为包含块，即添加一层 div 作为 overflow 的子元素、绝对定位的父元素，并设置属性position:relative/absolute/fixed；
任意合法 transform 声明当做包含块，考虑兼容性，overflow 自身设置 transform 或其子元素设置 transform；

overflow 失效的妙用

依赖 Overflow 的样式表现

resize 拉伸

resize: both 水平垂直两边拉伸；
resize: horizontal 水平方向拉伸；
resize: vertical 垂直方向拉伸；

但，resize 要想起作用，元素的 overflow属性不能为 visible！

文本域天生具有resize特性，因为默认 overflow：auto

text-overflow: ellipsis 文字溢出省略

Overflow 与锚点技术

锚点定位的本质是改变容器的滚动高度。其生效的条件有：

容器可滚动——overflow 不是 visible,里面元素高于容器；
锚点元素在容器内；

锚点定位的触发

url地址中的锚链与锚点元素；
可 focus 的锚点元素处于 focus 状态；

锚点定位的作用

快速定位
与 overflow 结合的选项卡技术

但这种技术有明显的不足，由于锚点定位一直定位到最外层的滚动条，所以点击锚点后，会使页面滚动到屏幕最顶端，影响体验；但应用在单页应用，没有滚动条的页面效果不错。