css溢出机制探究

为什么需要深入学习CSS溢出机制?

在实际开发的过程中,内容溢出是经常见到的。如果不深入了解这个机制,你经常会碰到这样的问题:为什么这个元素没有受到祖先元素的overflow:hidden的影响?这里出现的滚动条是哪个元素的?如何消除这个滚动条?如何在指定的元素上增加滚动功能?
在这篇文章,我们将会从CSS标准出发,讨论CSS溢出机制的细节。

溢出

当一个盒子(block container box)的内容(子元素、孙子元素等后裔)超过盒子本身的大小的时候,就会出现溢出。这个时候CSS属性overflow决定如何处理溢出。这个css属性大家都知道,在这里不讨论了,在这里指出需要注意的几点:

  • overflow会影响所在元素的所有内容的裁剪、滚动,但是有一种情况例外:"It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element." 也就是说,overflow的所在元素必须是内容元素的直接或间接containing block,这时overflow属性才会影响这个内容元素。比如<A><B><C><C/><B/><A/>,一般来说,B的overflow会影响C,但是如果C是相对于viewport或者A定位的(比如使用了position:absolute),那么C的显示就不受B的裁剪、滚动的影响。
  • 当需要滚动条的时候,滚动条会放在border与padding之间。父元素产生滚动条以后,它产生的containing block的尺寸会减少,以便给滚动条腾出空间。
  • CSS3文档:"When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent may offer a scrolling mechanism." 即,visual viewport可以拥有滚动条。
  • 在<html>和<body>上的overflow属性存在冒泡现象: "UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'. "
    意思是:viewport的overflow属性是从<html>或者<body>元素窃取来的:如果<html>的overflow不是'visible'(默认值),那就从<html>窃取;否则,从<body>窃取。如果viewport窃取来的overflow是'visible',那么将它视为'auto'(因为不可能在viewport之外显示内容)。被窃取的元素,它的overflow被设置为'visible'。

可以推断出:

  • 一般来说只有元素才能拥有滚动条(更准确地说,只有产生block container box元素才能拥有滚动条)。但visual viewport是个例外。它虽然不是一个元素,但是也可以拥有滚动条。如果在<html>和<body>上都没有设置overflow属性而使用默认值visible(大部分场景都是这样),那么,visual viewport的overflow就是auto:当网页中有内容超出visual viewport时,visual viewport上会出现滚动条。

    关于viewport的讨论在【响应式布局】initial containing block、viewport以及相关尺寸
  • <html>的最终overflow永远都是visible。也就是说,<html>元素永远不可能拥有滚动条。
  • 如果你想要为<body>设置非visible的overflow,需要先为<html>设置一个非visible的值来冒泡,从而<body>的overflow不会被冒泡。

小练习

小练习:利用以上原理,使visual viewport和<body>都拥有横、竖滚动条,总共4个滚动条。不能使用overflow: scroll(这样就太简单了)。
步骤:

  1. 使visual viewport和<body>的最终overflow值都为auto,从而可以出现滚动条。
  2. 触发visual viewport和<body>的溢出。通过【为内容设置一个更大的尺寸】来做到。

代码+注释:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>test</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html {
      /* 使html的尺寸始终与visual viewport相同(即使你缩放、调整浏览器窗口的大小),从而body可以设置一个比visual viewport还大的尺寸(110%)。
      对于默认为block的元素可以省略width: 100%; */
      width: 100%;
      height: 100%;
      /* 非visible的值冒泡到visual viewport上,使visual viewport可以出现滚动条 */
      overflow: auto;
      border: 15px solid red;
    }

    body {
      /* 使得body可以出现滚动条 */
      overflow: auto;
      /* body溢出html,从而溢出initial containning block,从而溢出visual viewport,使得visual viewport出现滚动条。
      当然,你也可以通过很多其他的方式来触发visual viewport的溢出,比如增大html元素,或者在body中弄一个position: absolute的div */
      width: 110%;
      height: 110%;
      border: 15px solid green;
    }

    main {
      /* main溢出body,使得body出现滚动条 */
      width: 110%;
      height: 110%;
      border: 15px solid blue;
    }
  </style>
</head>

<body>
  <main>
  </main>
</body>

</html>

结果:

自己在chrome中打开以上代码,能更加清晰地看出是怎么做到的。

也可以通过absolute的方式来溢出initial containing block:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>test</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html {
      /* 使html的尺寸始终与visual viewport相同(即使你缩放、调整浏览器窗口的大小),从而body可以设置一个比visual viewport还大的尺寸(110%)。
      对于默认为block的元素可以省略width: 100%; */
      width: 100%;
      height: 100%;
      /* 非visible的值冒泡到visual viewport上,使visual viewport可以出现滚动条 */
      overflow: auto;
      border: 15px solid red;
    }

    body {
      /* 使得body可以出现滚动条 */
      overflow: auto;
      /* 为body设置一个尺寸,从而main可以设置一个比body还大的尺寸(110%)。
      对于默认为block的元素可以省略width: 100%; */
      height: 100%;
      border: 15px solid green;
    }

    main {
      /* main溢出body,使得body出现滚动条 */
      width: 110%;
      height: 110%;
      border: 15px solid blue;
    }

    .abs {
      /* 通过absolute的方式来溢出initial containing block,从而溢出viewport */
      position: absolute;
      width: 100px;
      height: 100px;
      right: -100px;
      bottom: -100px;
      border: 15px solid blueviolet;
    }
  </style>
</head>

<body>
  <main>
  </main>

  <div class="abs"></div>
</body>

</html>

结果:

自己在chrome中打开以上代码,能更加清晰地看出是怎么做到的。

如何看出某个滚动条是属于哪个元素的?

通过Chrome DevTools就可以看出滚动条的所属元素。
前面已经说过,滚动条的位置在元素的border与padding之间。当你使用Chrome DevTools选中某个元素,发现滚动条恰好在高亮区域(border)内部时,滚动条就属于当前元素。

要判断滚动条是否属于visual viewport,首先先将右边、下边的滚动条分别滚动到最下、最右(这一步很重要,它保证没有内容藏在滚动条下面)。然后,Ctrl+Shift+C选择右边或下边的滚动条,如果高亮的区域不包含这个滚动条,就说明这个滚动条不属于任何元素,也就是属于visual viewport。

JavaScript获取滚动距离

https://developer.mozilla.org...
https://developer.mozilla.org...
获取或设置元素的内容被滚动的距离。这两个属性适用于所有Element。

如果想要获取visual viewport的滚动距离,除了这个方法以外,还有更多等效的方法。见【响应式布局】initial containing block、viewport以及相关尺寸

参考资料

  1. css2.1标准

csRyan的学习专栏
分享对于计算机科学的学习和思考,只发布有价值的文章: 对于那些网上已经有完整资料,且相关资料已经整...

So you're passionate? How passionate? What actions does your passion lead you to do? If the heart...

1.1k 声望
181 粉丝
0 条评论
推荐阅读
手写一个Parser - 代码简单而功能强大的Pratt Parsing
在编译的流程中,一个很重要的步骤是语法分析(又称解析,Parsing)。解析器(Parser)负责将Token流转化为抽象语法树(AST)。这篇文章介绍一种Parser的实现算法:Pratt Parsing,又称Top Down Operator Precede...

csRyan阅读 2.7k

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.7k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.9k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.5k评论 2

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.1k评论 10

封面图
由小见大!不规则造型按钮解决方案
今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。虽然麻烦,但是这个图形勉强也...

chokcoco17阅读 1.3k

封面图
CSS 如何根据背景色自动切换黑白文字?
在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:

XboxYan19阅读 1.7k

封面图

So you're passionate? How passionate? What actions does your passion lead you to do? If the heart...

1.1k 声望
181 粉丝
宣传栏