如何实现类似Facebook个人主页的滚动条布局效果

不需要写任何JavaScript，纯CSS就能实现这个效果。核心思路是不要给右侧内容区单独加滚动属性，直接用整个页面作为统一滚动容器，左侧侧边栏用粘性定位固定位置，浏览器原生的滚动条默认就会显示在屏幕最右侧，和Facebook个人主页的交互效果完全一致。

先提个你原有代码的小问题：DOM结构里的中间容器类名写的是wrap，样式里定义的是.wrapper，二者需要统一，否则宽度居中的样式不会生效。

完整可运行代码 #

<div class="container">
   <div class="wrap">
      <div class="left"> photos - friends </div>
      <div class="right"> posts </div>
   </div>
</div>

/* 先重置浏览器默认边距，避免滚动条和内容之间出现白边 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 不要给html、body加overflow:hidden，否则全局滚动会失效 */
html, body {
  width: 100%;
  min-height: 100vh;
}
.container { 
  width: 100%;
}
.wrap { 
  width: 1050px; 
  margin: 0 auto;
  /* 用flex实现左右分栏 */
  display: flex;
  align-items: flex-start; /* 关键配置：让左栏高度跟随自身内容，不会被右栏拉伸 */
  gap: 24px; /* 左右两栏的间距可以按需求自行调整 */
}
.left {
  width: 320px; /* 左栏宽度按设计需求改就行 */
  flex-shrink: 0; /* 防止左栏被右侧内容挤压变形 */
  height: fit-content; /* 关键配置：高度只包裹自身内容，不撑满整列高度 */
  /* 核心配置：粘性定位，页面滚动时左栏固定在视口内 */
  position: sticky;
  top: 0; /* 如果页面有固定顶部导航，把这个值改成导航的高度即可 */
}
.right {
  flex: 1;
  min-width: 0; /* 防止长内容/宽元素撑破flex布局 */
  /* 注意：这里绝对不要加overflow:auto/scroll，也不要给right设置固定高度，否则滚动条会出现在元素内部 */
}

效果说明 #

• 滚动条是浏览器原生的全局滚动条，默认就贴在屏幕最右侧，不会出现在右侧内容栏的边缘
• 上下滚动页面时，左侧的照片、好友栏会始终固定在视口对应位置，不会跟着右侧帖子内容滚动
• 右侧内容区高度完全由自身内容决定，内容长度超出视口时自然触发全局滚动，不需要额外做位置同步
• 这套方案兼容所有现代浏览器，不需要额外做JS事件监听，性能比JS实现的方案好很多

避坑提醒：如果你的页面有固定在顶部的导航栏，记得给.left的top属性设置成导航栏的高度，避免左栏被导航遮挡。

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