什么是“滚动框"? [英] What are `scrolling boxes`?

问题描述

在 CSS定位版式模块级别3 中(工作草案)在 6.2章中.粘性定位，我们有以下定义: (强调我的)

In the CSS Positioned Layout Module Level 3 (Working draft) in chapter 6.2. Sticky positioning we have this definition: (Emphasis mine)

粘性放置的框的位置与相对放置的框的位置类似，但是偏移量是通过使用滚动框或视口(如果没有祖先具有滚动框.

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

问题6 应该真正定义粘性定位就最接近的可滚动祖先而言，但目前CSS中其他地方都没有定义此类术语. CSSOM视图是指滚动框". CSS Overflow尚未从CSS Box提取相关文本，并且CSS Box具有"flow root"的旧的，令人困惑的定义.这几乎是(但可能不是完全)我们想要的.该规范指的是流根".因为那是当前某个地方最接近的东西，但这并不是最佳选择.

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月发布)?无论框是否为滚动框，我特别想打开或关闭.

Does anybody know, where I can find further information (this draft is from May 2016)? I especially want to switch on or off, if a box is a scrolling box or not.

推荐答案

正如@alex所说，滚动框是一个框，其中溢出值设置为与visible(默认值)不同的值.我无法确认，但是我根据上一个答案得出了结论，在该答案中，溢出导致了粘性元素的出现.

As @alex said a scrolling box is a box where the value of overflow is set to a value different from visible (the default one). I cannot confirm but I concluded this based on this previous answer where overflow is creating some issues with sticky element.

正如我在此处所解释的，如果您有一个元素，其中overflow:hidden作为position:sticky的祖先，则该元素将停止工作，因为其偏移量将基于该框(使用overflow:hidden)进行计算，因为它是带有滚动框的最接近的祖先.由于我们使用hidden，因此无法滚动此框，因此无法看到粘性行为.

As I explained there, if you have an element with overflow:hidden as an ancestor of the position:sticky this one will stop working because its offset will be calculated based on that box (with overflow:hidden) because it's the nearest ancestor with a scrolling box. Since we used hidden we cannot scroll this box so we cannot see the sticky behavior.

这是一个基本示例:

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

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

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

In the below example, the viewport will be used for the reference because we have no scrolling box. Now let's add overflow to the wrapper:

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

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

现在，我们的粘滞元素将考虑使用包装器作为参考，但是由于我们没有任何溢出，因此我们将没有任何滚动，因此无法触发粘滞行为.另外，滚动视口也无济于事.

Now our sticky element will consider the wrapper for the reference but since we don't have any overflow, we won't have any scroll so there is no way to trigger the sticky behavior. Also scrolling the viewport will do nothing.

如果通过在内部添加其他元素来添加一些溢出，我们可以触发粘滞行为:

If you add some overflow by adding another element inside we can trigger the sticky behavior:

.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>

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

We can clearly see how the scroll of the wrapper is controlling the sticky element and the scroll of the viewport is doing nothing thus we can conclude that our wrapper is the the nearest ancestor with a scrolling box

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

Considering the last issue in the specification we can also read that:

粘滞式定位实际上应该根据最近可滚动的祖先来定义，但是CSS中其他地方目前都没有这样的术语. CSSOM视图是指滚动框".

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."

因此，可滚动的祖先与具有滚动框的祖先相同.

So probably a scrollable ancestor is the same as an ancestor with a scrolling box.

这篇关于什么是“滚动框"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！