Twitter 类似的滚动行为。从页面中的任意位置滚动主要内容

Question

我陷入了 CSS / HTML 布局和滚动问题。

我的最终目标是拥有一个与Twitter主页（桌面）非常相似的网站布局。

它们基本上有 2 个侧边栏和它们之间的主要内容 div。两个侧面板是固定的，不会随着用户滚动页面而滚动。主要内容任意大，并且可滚动。然而，我不明白的部分是，即使我将鼠标滚动到主 div 之外，主 div 也会滚动。

即使在导航栏/侧边栏或灰色背景上滚动时，主 div 也会滚动。此外，浏览器滚动条一直位于窗口的右侧，而不是在主要内容 div 内。

目前，我将绿色侧边栏、蓝色内容和紫色侧边栏 div 全部放在水平弹性盒容器中。

基本上我的问题是如何布局我的页面，使其具有与桌面上 Twitter 主页类似的滚动和布局行为。

谢谢 ：）

Answer 1

像这样的东西吗？

.sidebar {
  width: 25%;
  height: 25vh;
  min-height: 200px;
  overflow: auto;
  position: sticky;
  top: 5%;
}

.main {
  width: 60%;
  height: 200vh;
  min-height: 1000px;
  display: flex;
  flex-direction: column;
}

.main,
.sidebar {
  border: 5px solid #222;
  background-color: white;
  border-radius: 10px;
  color: #222;
  padding: 15px;
  margin: 10px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

body {
  padding: 3%;
  background-color: #ccc;
  font-size: 20px;
  box-sizing: border-box;
  font-family: Lato, sans-serif;
}

code, pre {
  background-color: #ccc;
  padding: 0 3px;
  border-radius: 5px;
}

.bottom {
  justify-self: bottom;
}

<div class="wrapper">
   <div class="sidebar">
    <h3>Sticky sidebar</h3>
    
    
  </div>
  <div class="main">
    <h2>Main content</h2>
    <p>Scroll down the page!</p>

    
  </div>

  <div class="sidebar">
    <h3>Sticky sidebar</h3>
   
  
  </div>
</div>