重拾CSS规范之overflow

发表于   |   分类于   |     |   本文阅读量 次

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 元素，它定宽且水平居中。在滚动条出现的这一刹那，它一定会被挤，向左偏移。因为是一下子偏移过去的，会有页面跳动的感觉。

解决方法有两个：

  1. html { overflow-y: scroll; }
    这样子又回到了IE7年代了，很不推荐

  2. .container { padding-left: calc(100vw - 100%); }
    这样子就不会出现偏移跳动了，但是此时就算不上居中了。

自定义滚动条样式

这里给出的是 webkit 内核的浏览器定义方式，IE的太丑就不介绍了。

1
2
3
4
5
6
::-webkit-scrollbar /*整体部分*/
::-webkit-scrollbar-button /*两端按钮*/
::-webkit-scrollbar-track /*外层轨道*/
::-webkit-scrollbar-track-piece /*内层轨道*/
::-webkit-scrollbar-thumb /*滚动滑块*/
::-webkit-scrollbar-corner /*边角*/

实际开发常用的就下面几个：

1
2
3
4
5
6
7
8
9
10
11
12
::-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;
}

absolute 溢出

我勒个擦，不是已经设置了 overflow: hidden 了吗，怎么还能出去？绝对定位要上天了。。。

先找一下相关的官方解释：

绝对定位元素不总是被父级 overflow 属性裁剪，尤其当 overflow 在绝对定位元素及其包含块之间的时候。
【包含块】：此处的包含块指 position 不为 static 的元素

哦，原来是这样， overflow 确实在绝对定位元素及其包含块（根元素）之间，所以压根管不住他。

有问题就得解决问题啊！下面提供两种方法来解决这种问题。

解决方法

  1. overflow 元素自身为包含块

  2. overflow 元素和绝对定位元素 中间的元素为包含块

设置非 static 的 position 即可。

实际案例

下面是前两天leader要我们解决的一个案例的简化版。真实案例中，滚动窗中是一个表格，每一行中都有一个待提示字段，但是leader希望能够让出现的提示文本悬浮在滚动窗之上。

反正我到现在没找到实现的可能性，因为如果去除 relative ， 绝对定位元素将会跑到滚动窗外边去，不去除 relative ，就一定会被限制在里面。昂，就是无解喽！

配合 overflow 才能实现的效果

resize 拉伸

必须配合非 visible 的 resize 才能实现。

文字溢出以 ‘…’ 显示

之前讲解 BFC 的时候，详细分析了它的各项特性， overflow 恰恰能够触发它，所以如果记不太清就赶紧回去翻翻看昂。

今天还找到了一种比较好的写博客的方法，一边学习的时候一边在新建文件中写下来，写博客的时候一是方便整理思路，而是省去了一些重复劳动力，速度上去了好多。

热评文章