左侧滚动+右侧粘性布局实现原理解析及优化方案咨询

现有实现代码 #

CSS代码 #

.sticky_show_container {
    width: 100%; 
    display: flex;
    justify-content: center;
    height: 150vh;
}

.sticky_show_grid {
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: 230vh;
    background-color: aquamarine;
}

.sticky_show_header {
    display: flex;
    justify-content: flex-start;
    position: sticky;
    top: 50%;
    height: 100vh;
}

JSX代码 #

<div className="sticky_show_container">
    <div className="sticky_show_grid">
        <div className="sticky_show_content">
            <Card image={'/1.webp'} title={'villa mosco'} subTitle={'tranquility'} />
            <Card image={'/1.webp'} title={'villa mosco'} subTitle={'tranquility'} />
            <Card image={'/1.webp'} title={'villa mosco'} subTitle={'tranquility'} />
        </div>
        <div className="sticky_show_header">
            <p>more villas</p>
        </div>
    </div>
</div>

注：每张Card高度为50vh，当前布局已可正常运行，需求是解析原理并提供更优实现。

布局工作机制解析 #

1. 粘性定位核心逻辑
   右侧.sticky_show_header使用position: sticky，行为由两个关键规则控制：

   • top: 50%：当元素滚动至距离视口顶部50%位置时，从相对定位切换为固定定位，保持在该位置。
   • 父容器范围限制：粘性元素仅在其父容器（.sticky_show_grid）的滚动范围内生效，当父容器即将完全滚出视口时，粘性元素会跟随父容器一起移动。

2. 容器高度配合逻辑

   • 左侧内容总高度为3张Card之和：3 × 50vh = 150vh，外层.sticky_show_container设为150vh，刚好包裹左侧内容。
   • 网格容器.sticky_show_grid设为230vh，比左侧内容高80vh，这部分额外高度为粘性元素提供滚动过渡空间：
     • 初始状态下，粘性元素位于网格容器顶部，对应页面最顶端。
     • 页面滚动时，粘性元素先随页面下移，触发top:50%后固定在视口中间。
     • 当页面继续滚动至网格容器剩余高度等于视口高度时，粘性元素跟随网格容器上移，最终与左侧最后一张Card对齐，随后进入下一部分内容。

3. Grid布局辅助作用
   grid-template-columns: 1fr 1fr将容器平分为两列，保证左右宽度一致；Grid的块级特性让网格容器高度直接决定页面滚动范围。

更优实现方案 #

当前方案依赖硬编码vh值，适配性较差，推荐以下优化方向：

方案1：动态计算容器高度，避免硬编码 #

用CSS变量或自适应属性替代固定vh值，适配内容高度变化：

.sticky_show_container {
    width: 100%;
    display: flex;
    justify-content: center;
    /* 去掉固定高度，由子元素撑开 */
}

.sticky_show_grid {
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    /* 用padding-bottom替代固定高度，预留过渡空间 */
    padding-bottom: 80vh;
    background-color: aquamarine;
}

.sticky_show_header {
    position: sticky;
    top: 50%;
    height: 100vh;
    align-items: flex-start;
}

方案2：结合Scroll Snap增强滚动连贯性 #

让左侧Card滚动时自动对齐视口，提升粘性元素与内容的配合精度：

.sticky_show_content {
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    height: 100vh;
}

.Card {
    scroll-snap-align: start;
    height: 50vh;
}

方案3：简化容器层级 #

合并双层容器，减少DOM嵌套，提升渲染性能：

<div className="sticky_show_grid">
    <div className="sticky_show_content">
        <Card image={'/1.webp'} title={'villa mosco'} subTitle={'tranquility'} />
        <Card image={'/1.webp'} title={'villa mosco'} subTitle={'tranquility'} />
        <Card image={'/1.webp'} title={'villa mosco'} subTitle={'tranquility'} />
    </div>
    <div className="sticky_show_header">
        <p>more villas</p>
    </div>
</div>

.sticky_show_grid {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 80vh;
    background-color: aquamarine;
}

内容的提问来源于stack exchange，提问作者john