嵌套子项中的粘性元素

Question

我有以下 html，包含一个可滚动的 div 和一个子行列表。行的大小大于容器的宽度，因此可以看到滚动条。

每行都有一个宽度等于最顶部 div 的单元格，还有一个在非滚动视图中不可见的第二个单元格。向右滚动后，我们可以看到它。

我想要实现的是利用 css 的粘性位置，使粘性单元格始终可见。

<div id="scrollable-container" style="background-color: lightgrey; height: 150px; width: 600px; overflow: auto;">
    <div id="fit" style="height: 150px; width: 800px;">
        <div id="row" style="height: 100px; width: 800px; display: flex;">
            <div id="cell" style="background-color: yellow; height: 100px; width: 600px;"></div>
            <div id="cell-sticky"
                 style="background-color: red; height: 100px; width: 100px; position: sticky; left: 0px;"></div>
        </div>
    </div>
</div>

有人可以解释为什么这种细胞粘性 div 不可见吗？有没有办法实现这个功能？

Answer 1

我根据这个把粘滞位置改为right: 0px而不是left: 0px:

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

还有这个……

Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the GitHub issue on W3C CSSWG). MDN

这使粘性 div 保持可见，并仅在水平上下文中粘在最近的可滚动元素（在本例中为最外层 div）的右边缘，直到遇到其包含块的对边（div，id 为 'row'）。

<div id="scrollable-container" style="background-color: lightgrey; height: 150px; width: 600px; overflow: auto;">
    <div id="fit" style="height: 150px; width: 800px;">
        <div id="row" style="height: 100px; width: 800px; display: flex;">
            <div id="cell" style="background-color: yellow; height: 100px; width: 600px;">The arguments object is useful for functions called with more arguments than they are formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments, such as Math.min(). This example function accepts any number of string arguments and returns the longest one:</div>
            <div id="cell-sticky"
                 style="background-color: red; height: 100px; width: 100px; position: sticky; right: 0px;"></div>
        </div>
    </div>
</div>

嵌套子项中的粘性元素

Sticky element in a nested child

html

css

sticky