为什么将填充添加到最近的滚动端口会改变粘性元素所粘的阈值位置？

Question

根据我的理解，对于粘性定位方案，CSS规范定义应用于粘性元素的插入是相对于最近的滚动端口的边缘，然后形成粘性视图矩形（SVR）。 因此，SVR 的边缘决定了粘性元素实际粘住的阈值。

粘性定位与相对定位类似，只不过偏移量是根据最近的滚动端口自动计算的。
对于粘性定位框，插入属性表示从最近滚动端口的相应边缘开始的插入，定义用于约束框位置的粘性视图矩形。

此外，CSS规范定义了scrollport和最近的scrollport，如下所示：

滚动容器的视觉“视口”（通过它可以查看可滚动溢出区域）与其填充框重合，称为滚动口。盒子最近的滚动端口是其最近的滚动容器祖先的滚动端口。

_{代码中的填充符就在那里，以便可以清楚地看到}

.sticky

元素的粘性和滚动行为。

考虑以下代码片段：

.scrollport {
  width: 70%;
  height: 250px;

  overflow: auto;
}

.filler {
  height: 110%;
  background-color: aqua;
}

.container-filler {
  height: 100px;
  background-color: red;
}

.sticky {
  position: sticky;
  top: 0px;
  bottom: 0px;

  border: 3px solid slateblue;
}

<div class="scrollport">
  <div class="filler"></div>

  <div class="container">
    <div class="container-filler"></div>
    <div class="sticky">Sticky Element</div>
    <div class="container-filler"></div>
  </div>

  <div class="filler"></div>
</div>

对于上面的代码，由于

top

和

bottom

插入设置为

0px

，SVR的边缘与滚动端口重合。因此，当满足阈值时，

.sticky

元素会一直保留，直到它要么到达其正常位置（对于

bottom: 0px

），要么到达其容器的边界（对于

top: 0px

），然后它会随容器一起滚动。

现在，考虑以下代码片段，其中

padding

添加到

.scrollport

元素中。

.scrollport {
  width: 70%;
  height: 250px;

  padding: 20px 0; /* added top and bottom padding */

  overflow: auto;
}

.filler {
  height: 110%;
  background-color: aqua;
}

.container-filler {
  height: 100px;
  background-color: red;
}

.sticky {
  position: sticky;
  top: 0px;
  bottom: 0px;

  border: 3px solid slateblue;
}

<div class="scrollport">
  <div class="filler"></div>

  <div class="container">
    <div class="container-filler"></div>
    <div class="sticky">Sticky Element</div>
    <div class="container-filler"></div>
  </div>

  <div class="filler"></div>
</div>

可以注意到，当顶部和底部

padding

添加到

.scrollport

时，

.sticky

元素不会停留在给定阈值。
SVR 的边缘不与滚动端口的边缘重合。顶部填充将 SVR 的顶部边缘向下推，而底部填充将 SVR 的底部边缘向上推。

正如上面已经引用的，为了形成 SVR，插入相对于 最近的滚动端口 的相应边缘应用，并且滚动端口与滚动容器的 填充框重合。
这意味着向滚动端口添加的填充不应影响 SVR 的位置。在任何一种情况下，如

top: 0px

和

bottom: 0px

，SVR 位置应与滚动端口（或者换句话说，其填充框）一致。

相反，在考虑填充之后应用插入。因此，插入有效地将 SVR 相对于滚动端口的 内容框定位，而不是相对于滚动端口的填充框。

问题

---

那么，形成 SVR 的粘性定位方案中的这种行为是否与 CSS 规范中的实际规定相矛盾？

或者只是我错误地解释了规范并且这种行为是预期的？如果是这种情况，谁能解释一下我哪里出了问题？

另外，规范中是否有记录？

Answer 1

scrollport

和nearest scrollport的定义本身并不能解释粘性行为。 padding-box部分解释了滚动内部的内容（与粘性行为无关）

检查这个例子：

.box {
  margin: 50px;
  border: 50px solid red;
  padding: 50px;
  background: green;
  height: 150px;
  overflow: auto;
}

.box div {
  height: 500px;
  background: blue;
}

<div class="box">
  <div></div>
</div>

我添加了边距、边框、填充，我们就有了内容。只有填充和内容位于“滚动内部”，这就是规范中提到的

padding-box

。

但是在定义粘性位置的偏移量时，我们考虑了

最近的滚动端口元素

，但没有考虑padding-box。在规范中，您可以在某处读到：“只要它的位置框保持包含在其包含块内即可。”并且元素的包含块始终是父级（或祖先）的

content-box

，除了绝对元素，它是

padding-box

。我知道这有点令人困惑，但基本上你有两件事。

padding-box

解释了滚动机制的工作原理以及滚动内部的考虑因素。然后你就得到了受包含块规则限制的粘性行为。