overflow
的知识点没有那么多,所以这篇文章里面概念性的东西只放了一个,干货实例反而很多,而且都是很多我们平时都必须要用的,也有一些可能容易被忽略的知识点本文都有提及。所以,不要没有耐心,这里都是你的菜!
当然文章也从来不是科普文,了解 overflow
基本概念就点击 CSS overflow 。
常识拓展
浏览器滚动条的来历
我们都看过浏览器的滚动条,那浏览器的滚动条是从哪儿来的?答案是 html
而非是 body
,这里就不再去给例子论证了。
那IE7和之前的浏览器右边会一直存在一条滚动条,即使没有滚动。IE8开始,还有其他的浏览器却不是,那造成这一切的源头是什么呢?我们来看一下浏览器默认样式。
- IE7浏览器默认:
html { overflow-y: scroll; }
- IE8+浏览器默认:
html { overflow: auto; }
overflow-x/overflow-y只设置一个
如果 overflow-x
和 overflow-y
值不同,且其中一个值显式设置为 visible
或未设置而默认为 visible
,而另外一个值是非 visible
的值,则 visible
值会被重置为 auto
。
按常理来说,我只给 overflow-x
设置了 auto
,那应该只生成横向滚动条。但恰恰是因为上面指出的特性, .wrap
元素的 overflow-y
也由 visible
变为了 auto
。
padding-bottom的缺失现象
Chrome 支持,其他浏览器不支持 padding-bottom
。
在不同浏览器打开我的博客查看即可。
所以以后想添加这种效果或者计算滚动高度的时候要注意各个浏览器的兼容性。
JS计算页面滚动高度
- Chrome 浏览器:
document.body.scrollTop
- 其他浏览器:
document.documentElement.scrollTop
所以如果想要获取页面滚动高度,推荐这样写:
var st = document.body.scrollTop || document.documentElement.scrollTop
水平居中跳动问题
我们是不是遇到过这么一种问题,本来页面高度不超过屏高,页面是没有滚动的,但是有一个展开的功能,把页面撑开了,滚动条就出来了。假设页面最外面的包裹元素是 .container
元素,它定宽且水平居中。在滚动条出现的这一刹那,它一定会被挤,向左偏移。因为是一下子偏移过去的,会有页面跳动的感觉。
解决方法有两个:
html { overflow-y: scroll; }
这样子又回到了IE7年代了,很不推荐.container { padding-left: calc(100vw - 100%); }
这样子就不会出现偏移跳动了,但是此时就算不上居中了。
自定义滚动条样式
这里给出的是 webkit
内核的浏览器定义方式,IE的太丑就不介绍了。
|
|
实际开发常用的就下面几个:
|
|
absolute 溢出
我勒个擦,不是已经设置了 overflow: hidden
了吗,怎么还能出去?绝对定位要上天了。。。
先找一下相关的官方解释:
绝对定位元素不总是被父级
overflow
属性裁剪,尤其当overflow
在绝对定位元素及其包含块之间的时候。
【包含块】:此处的包含块指position
不为static
的元素
哦,原来是这样, overflow
确实在绝对定位元素及其包含块(根元素)之间,所以压根管不住他。
有问题就得解决问题啊!下面提供两种方法来解决这种问题。
解决方法
overflow
元素自身为包含块overflow
元素和绝对定位元素 中间的元素为包含块
设置非 static
的 position
即可。
实际案例
下面是前两天leader要我们解决的一个案例的简化版。真实案例中,滚动窗中是一个表格,每一行中都有一个待提示字段,但是leader希望能够让出现的提示文本悬浮在滚动窗之上。
反正我到现在没找到实现的可能性,因为如果去除 relative
, 绝对定位元素将会跑到滚动窗外边去,不去除 relative
,就一定会被限制在里面。昂,就是无解喽!
配合 overflow 才能实现的效果
resize 拉伸
必须配合非 visible
的 resize
才能实现。
文字溢出以 ‘…’ 显示
之前讲解 BFC
的时候,详细分析了它的各项特性, overflow
恰恰能够触发它,所以如果记不太清就赶紧回去翻翻看昂。
今天还找到了一种比较好的写博客的方法,一边学习的时候一边在新建文件中写下来,写博客的时候一是方便整理思路,而是省去了一些重复劳动力,速度上去了好多。