什么是“滚动框”？

Question

在 CSS Positioned Layout Module Level 3 (Working draft) in chapter 6.2. Sticky positioning 中我们有这样的定义：（强调我的）

A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.

这些滚动框是什么？

文档的下方有一个关于术语 scrolling boxes

的问题

Issue 6 Sticky positioning should really be defined in terms of the nearest scrollable ancestor, but there is currently no such term defined elsewhere in CSS. CSSOM View refers to "scrolling boxes." CSS Overflow has yet to pull in the relevant text from CSS Box, and CSS Box has an old, confusing definition of "flow root" which is almost (but probably not quite) what we want here. This spec refers to "flow root," since that’s the closest thing currently specced somewhere, but this is not optimal.

有谁知道我在哪里可以找到更多信息（此草稿来自 2016 年 5 月）？我特别想打开或关闭一个框是否是滚动框。

Answer 1

正如@alex 所说，滚动框是一个框，其中 overflow 的值设置为不同于 visible（默认值）的值。我无法确认，但我根据这个得出结论，其中溢出导致粘性元素出现一些问题。

正如我在那里解释的那样，如果你有一个元素 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>

我们可以清楚地看到包装器的滚动是如何控制粘性元素的，而视口的滚动什么都不做，因此我们可以得出结论，我们的包装器是 最近的带滚动框的祖先

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

Sticky positioning should really be defined in terms of the nearest scrollable ancestor, but there is currently no such term defined elsewhere in CSS. CSSOM View refers to "scrolling boxes."

所以 可滚动祖先 可能与 带有滚动框的祖先相同 。

什么是“滚动框”？

What are `scrolling boxes`?

css

css-position

sticky

这些滚动框是什么？