Twitter 喜欢滚动行为。从页面的任何位置滚动主要内容

Question

我被这个 CSS / HTML 布局和滚动问题困住了。

我的最终目标是让网站布局与 Twitter's 主页（桌面）非常相似。

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

即使在 NAVBAR / SIDEBAR 或灰色背景上滚动，主要 div 也会滚动。此外，浏览器滚动条一直位于 window 的右侧，而不是在主要内容 div.

内

目前我有绿色侧边栏、蓝色内容和紫色侧边栏 div 都在一个水平的 flex-box 容器中。

基本上我的问题是如何布局我的页面，使其具有与桌面上的 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>

Twitter 喜欢滚动行为。从页面的任何位置滚动主要内容

Twitter like scroll behaviour. Scroll main content from anywhere in the page

html

css

layout

scroll