本文介绍一种纯 css 实现的双列响应式布局方案：左列保持视口内垂直居中且不随滚动偏移，右列承载长内容并支持任意位置（包括在左列区域）触发滚动，无需 javascript 干预。
本文介绍一种纯 css 实现的双列响应式布局方案：左列保持视口内垂直居中且不随滚动偏移，右列承载长内容并支持任意位置（包括在左列区域）触发滚动，无需 javascript 干预。
要实现“左列固定居中、右列全局可滚动”这一常见但易被误用的交互效果，关键在于跳出“给容器设 height: 100vh + overflow-y: auto”的传统思路。问题本质不是“让右列自己滚动”，而是“让整个页面滚动时，仅右列内容参与流式滚动，左列始终锚定在视口内”。
✅ 正确解法是采用 CSS Grid 布局 + position: sticky 组合：
- 使用 display: grid 划分左右等宽列（grid-template-columns: 1fr 1fr），避免 Flexbox 在高度约束下的滚动耦合问题；
- 将左列内容包裹在
- 右列（
）不设高度限制，其子元素自然流式排列；浏览器默认滚动行为会作用于整个文档，而由于左列元素是 sticky 定位，它不会随文档流滚动，从而达成「右列内容滚动、左列静止」的分离效果； - 更重要的是：滚动事件监听范围是整个 viewport，用户在左列区域滚轮/触控板滑动时，依然会驱动右列内容滚动 —— 这正是题干要求的“right side scrolls regardless of where you scroll on the screen”。
以下是可直接落地的完整示例（适配 React + CSS Modules 场景）：
/* home.module.css */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
height: fit-content; /* 不强制 100vh，让内容决定高度 */
}
.left {
background-color: #aefef7;
display: flex;
align-items: center;
justify-content: center;
/* 关键：使内部内容 sticky */
}
.left > div {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
max-width: 400px; /* 可选：限制宽度提升可读性 */
text-align: center;
}
.right {
background-color: #fab0b0;
overflow-y: visible; /* 允许内容自然溢出，由 body 控制滚动 */
}
.card {
height: 40vh;
background-color: #f7f7bb;
margin: 4rem 2rem 1.5rem;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}// Home.tsx
import styles from './home.module.css';
function Home() {
return (
<div className={styles.container}>
<div className={styles.left}>
<div>
<h2>Project Summary</h2>
<p>This panel stays fixed while you scroll.</p>
</div>
</div>
<div className={styles.right}>
{[...Array(8)].map((_, i) => (
<div key={i} className={styles.card}>
Card #{i + 1}
</div>
))}
</div>
</div>
);
}
export default Home;⚠️ 注意事项：
- 不要在 .container 或 .right 上设置 overflow: auto/scroll，否则会创建局部滚动上下文，破坏“全局滚动触发右列”的核心需求；
- sticky 元素必须有明确的 top（或 bottom）值，且其最近的具有滚动机制的祖先必须是视口本身（即不能被 overflow: hidden 的父级截断）；
- 若需左列内容真正垂直+水平居中，推荐在 内部再嵌套一层 div 并用 flex 居中（如示例所示），而非直接对 .left 应用 sticky；
- 在 React 中，确保根节点（如 #root）无意外 overflow 样式，以免干扰全局滚动流。
该方案完全基于现代 CSS（Grid + Sticky），兼容 Chrome 56+、Firefox 53+、Safari 15.4+，零 JS 依赖，语义清晰，性能优异。
