Flexbox 容器的 Sticky 位置

Question

我构建了一个包含两个项目的水平 flexbox 布局，每个项目都是一个垂直 flexbox。

这是当前的行为：当我向下滚动时，红色容器正常滚动。蓝色容器会粘住，然后在某个时候与红色容器一起滚动。这是一个问题，因为除非我滚动到页面底部，否则最后几个蓝色项目将永远不可见。但是如果我添加一个滚动事件来添加更多的红色容器，那么它永远不会发生。

这是预期的行为：两个容器都会正常滚动，直到最后一个蓝色框可见。然后蓝色容器将停止滚动。

问题：

如何实现预期的行为？
目前，为什么蓝色容器的滚动停止，然后又开始滚动以与红色容器对齐。

.wrapper{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px dashed rgba(114, 186, 94, 0.35);
    background: rgba(114, 186, 94, 0.05);
}

.item{
    display: flex;
    flex-direction: column;
}

div{
    min-width: 100px;
    min-height: 100px;
    margin: 10px;
}

.red{
    background-color: red;
}
.blue{
    background-color: blue;
}
.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

<div class="wrapper">
        <div class="item">
            <div class="red">First</div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red">Last</div>
        </div>
        <div class="item sticky">
            <div class="blue">1</div>
            <div class="blue">2</div>
            <div class="blue">3</div>
            <div class="blue">4</div>
            <div class="blue">5</div>
            <div class="blue">6</div>
            <div class="blue">7</div>
            <div class="blue">8</div>
            <div class="blue">9</div>
            <div class="blue">10</div>
        </div>
        
    </div>

Answer 1

要实现您想要的效果，您需要 top 的负值等于屏幕高度和元素高度之间的差值。

我不知道您是否拥有动态数量的元素，但如果我考虑到您将拥有已知数量的蓝色元素这一事实，您可以像下面这样轻松地做到这一点

.wrapper{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px dashed rgba(114, 186, 94, 0.35);
    background: rgba(114, 186, 94, 0.05);
}

.item{
    display: flex;
    flex-direction: column;
}

div{
    min-width: 100px;
    min-height: 100px;
    margin: 10px;
}

.red{
    background-color: red;
}
.blue{
    background-color: blue;
}
.sticky{
    position: sticky;
    top: calc(100vh - 10*(100px + 20px));
}

<div class="wrapper">
        <div class="item">
            <div class="red">First</div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red">Last</div>
        </div>
        <div class="item sticky">
            <div class="blue">1</div>
            <div class="blue">2</div>
            <div class="blue">3</div>
            <div class="blue">4</div>
            <div class="blue">5</div>
            <div class="blue">6</div>
            <div class="blue">7</div>
            <div class="blue">8</div>
            <div class="blue">9</div>
            <div class="blue">10</div>
        </div>
        
    </div>

Flexbox 容器的 Sticky 位置

Position Sticky for Flexbox containers

html

css

css-position

flexbox