如何实现同一容器内一个div固定、另一个div可滚动的效果？

这个效果用原生CSS就能实现，不需要额外引入JavaScript脚本，核心靠position: sticky属性配合flex布局完成。

基础代码结构 #

HTML #

<div class="wrapper">
  <!-- Div A 固定内容区 -->
  <div class="content-block">
    产品介绍、规格参数、购买按钮等固定内容放在这里
  </div>
  <!-- Div B 滚动图片区 -->
  <div class="img-block">
    <img src="你的图片地址1" alt="产品展示图1">
    <img src="你的图片地址2" alt="产品展示图2">
    <img src="你的图片地址3" alt="产品展示图3">
    <!-- 可继续添加更多图片 -->
  </div>
</div>

CSS #

/* 父容器 */
.wrapper {
  display: flex;
  gap: 48px; /* 两个区块的间距可按需调整 */
  max-width: 1200px; /* 宽度可根据自身页面布局修改 */
  margin: 0 auto;
  padding: 24px;
}

/* Div A 固定内容区 */
.content-block {
  width: 40%; /* 宽度按需调整 */
  position: sticky; /* 核心定位属性 */
  top: 24px; /* 滚动到距离顶部24px的位置开始固定，可自定义数值 */
  align-self: flex-start; /* 避免sticky元素被flex默认拉伸 */
}

/* Div B 滚动图片区 */
.img-block {
  flex: 1; /* 占满剩余宽度 */
}

.img-block img {
  width: 100%;
  margin-bottom: 24px; /* 图片之间的间距可调整 */
}

注意事项 #

• 不要给父容器wrapper加overflow: hidden、overflow: auto等溢出限制属性，会导致sticky定位失效
• position: sticky生效的前提是父容器高度大于sticky元素自身高度，该场景下父容器高度由内容更多的图片区撑开，刚好满足要求
• 如果需要适配移动端，可加媒体查询将flex布局改为纵向排列，取消sticky定位即可

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