滚动条归属问题

发表于

谁的滚动条

  • 当元素的内容区恰好包含了滚动条时，滚动条属于当前元素（div.outer）


overflow溢出的高度是谁的

1
2
3
4
5
6
<div class="outer">
    <div class="inner">
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.outer {
    height: 300px;
    overflow: auto;
    background-color: antiquewhite;
}

.inner {
    height: 200px;
    background-color: aliceblue;
}

h1 {
    height: 250px;
    margin: 0;
    padding: 0;
    background-color: saddlebrown;
}

p {
    height: 100px;
    background-color: cadetblue;
}

  • inner的高度只有200px，但是inner的子元素h1和p的高度加起来超过了200px。

  • inner的height属性为固定值，所以高度没有被撑开，仍然是200px。

  • inner的overflow属性为默认值visiable，所以内容不会被修剪，会呈现在元素框之外 。

  • 从inner往上追溯，outer的高度也是固定值，也不会被撑开。
  • outer的overflow属性为auto。 因此从inner溢出的内容高度被outer捕获。

注：如果outer的overflow属性也是visiable，则outer不会出现滚动条，会继续向上抛出溢出内容的高度，直到被更上一层元素捕获。

同理：如果html的overflow属性也是visiable，html会将溢出的内容高度抛给浏览器，所以会有这样的情况：整个页面出现了滚动条，但是滚动条不属于html，也不属于body。但是可以通过window.scrollTo()或者document.documentElement.scrollTop来控制滚动条的移动。