“滚动框”是什么？

Question

“滚动框”是什么？

csscss-positionsticky

3

在CSS Positioned Layout Module Level 3（工作草案）的第6.2节“粘性定位”中，我们有以下定义：（我强调）

粘性定位的元素与相对定位的元素类似，但是其偏移量是相对于最近的拥有滚动框的祖先元素计算的，如果没有祖先元素拥有滚动框，则相对于视口计算。

什么是这些滚动框？

文档后面还有一个关于术语“滚动框”的问题。

“粘性定位”应该真正基于最近的可滚动祖先元素进行定义，但是在CSS中目前没有这样的术语。CSSOM View 提到了“滚动框”。CSS Overflow 还没有从 CSS Box 中引入相关文本，而 CSS Box 则有一个旧的、令人困惑的“流根”的定义，它几乎（但可能不完全）是我们在这里想要的。由于这个规范中最接近当前规范的东西是“流根”，所以这个规范引用了“流根”，但这并不是最优的。

是否有人知道我可以在哪里找到更多信息（此草案来自2016年5月）？我特别想开启或关闭某个框是否为滚动框的选项。

- yunzen

滚动框我想应该是使用overflow: auto(或者相关的属性)并且拥有超出其边界的内容，因此触发滚动条。 - alex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

正如 @alex 所说，滚动框是一个其中 overflow 的值被设置为不同于 visible（默认值）的盒子。我不能确认，但我基于这个之前的答案得出了这个结论，其中 overflow 会与粘性元素产生一些问题。

就像我在那里解释的那样，如果您有一个具有 overflow:hidden 祖先的 position:sticky 元素，那么它将停止工作，因为其偏移量将基于该框（带有 overflow:hidden）计算，因为它是最近的带有滚动框的祖先。由于我们使用了 hidden，所以我们无法滚动这个框，因此无法看到粘性行为。

下面是一个基本示例：

.wrapper {
  height:200vh;
  border:2px solid;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}

<div class="wrapper">
  <div></div>
</div>

在下面的示例中，由于我们没有滚动框，因此将使用视口作为参考。现在让我们向包装器添加溢出：

.wrapper {
  height:200vh;
  border:2px solid;
  overflow:scroll;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}

<div class="wrapper">
  <div></div>
</div>

现在我们的粘性元素将以包装器为参考，但由于我们没有任何溢出，所以我们不会有任何滚动，因此无法触发粘性行为。此外，滚动视口也无效。

如果您通过添加另一个元素来添加一些溢出，则可以触发粘性行为：

.wrapper {
  height:200vh;
  border:2px solid;
  overflow:scroll;
  position:relative;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}

.wrapper > span {
  position:absolute;
  top:100%;
  height:50px;
  left:0;
  right:0;
  background:blue;
}

<div class="wrapper">
  <div></div>
  <span></span>
</div>

我们可以清楚地看到包装器的滚动条控制着粘性元素，而视口的滚动条则没有起到作用，因此我们可以得出结论，我们的包装器是“具有滚动框的最近祖先”。

考虑到规范中的最后一个问题，我们还可以看到：

引用：粘性定位应该真正基于“最近的可滚动祖先”，但是CSS中目前没有定义这样的术语。CSSOM View指的是“滚动框”。

因此，可能一个“可滚动祖先”与一个“带有滚动框的祖先”是相同的。