我有一个使用 CSS 的两列布局，具有粘性效果，类似于下面提供的示例。但是，滚动行为与我需要的略有不同。
目前，蓝色列首先开始滚动，然后是页面向下 50% 的红色列。然后两列都停在底部。
期望的行为：
我想要相反的效果。初始滚动时，两列（蓝色和红色）应同时滚动，直到红色列达到其内容限制。此时，红色列应停止滚动，而蓝色列继续滚动，直到其内容结束。
问题：
这种同步滚动行为可以使用纯 CSS 来实现吗？
.container {
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);
}
.col {
position: sticky;
top: 0;
}
.col div {
height: 250px;
width: 250px;
border: 2px dashed rgba(255, 186, 94, 0.35);
margin-bottom: 20px;
}
.col div:nth-child(2n) {
opacity: 0.5;
}
.op {
opacity: 0.7;
}
.col1 div {
background-color: red;
}
.col2 div {
background-color: blue;
}<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<div class="col col1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="col col2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>调整第一个项目的对齐方式，将其放置在底部，然后使用底部粘性行为
.container {
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);
}
.col {
margin-top: auto; /* place item at bottom */
position: sticky;
bottom: 0; /* instead of top */
}
.col div {
height: 250px;
width: 250px;
border: 2px dashed rgba(255, 186, 94, 0.35);
margin-bottom: 20px;
}
.col div:nth-child(2n) {
opacity: 0.5;
}
.op {
opacity: 0.7;
}
.col1 div {
background-color: red;
}
.col2 div {
background-color: blue;
}<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<div class="col col1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="col col2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>