左 div 固定右 div 可滚动无法正常工作

Question

我有一个部分，其中左侧 div 是固定的，右侧 div 是可滚动的，但右侧 div 内容甚至在滚动顶部到达该部分之前滚动。我希望右 div 仅在到达 div 的顶部或 div 的底部时滚动（从底部向上滚动时），但它随时滚动（不一致 - 当我快速滚动时，它开始在该部分的中间滚动，等等）。

当我快速向上或向下滚动时，它甚至会跳过此部分，但我希望它永远不会被跳过。

尝试快速和慢速滚动。滚动可以随时工作：

JSFiddle example

代码：

.outer_div {
  display: flex;
  position: relative;
  height: 600px;
  overflow-y: scroll;
  width: 100%;
}

.scroll-content-left {
  position: sticky;
  flex: 1 0 65%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-content-left>div {
  height: 200px;
  width: 400px;
  background-color: black;
}

.scroll-content-right {
  position: relative;
  height: 100%;
  right: 0;
  flex: 1 0 35%;
}

<div style="height: 600px; background-color: blue;"></div>

<div class="outer_div">

  <div class="scroll-content-left">
    <div></div>
  </div>

  <div class="scroll-content-right">
    <div>
      text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    </div>
  </div>
</div>

<div style="height: 600px; background-color: yellow;"></div>

Answer 1

如果您想要与您在 cmets 中提供的链接中的效果相同，您必须：

1. 删除粘性父 div 的 overflow 属性。

• 这一点值得强调，因为我认为你的预期并非如此，所以：你不能在那里拥有它。如果你想有粘性部分，就没有 CSS 可以让内部滚动条滚动。

1. 设置粘性 div 的 top 属性。

阅读this great tutorial。根据您的措辞，我认为 您 认为 scroll-content-left 和 scroll-content-right div 是“滚动的”，但它们没有；只是scroll-content-left被卡住了。

.outer_div{
  display: flex;
  position: relative;
  height:100%;
  width:100%;
}


.scroll-content-left {
  position: sticky;
  flex: 1 0 65%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-content-left > div {
  position: sticky;
  top: 0;
  height: 200px;
  width: 400px;
  background-color: black;
}

.scroll-content-right {
  position: relative;
  height:100%;
  right:0;
  flex: 1 0 35%;
}

<div style="height: 600px; background-color: blue;"></div>
    <div class="outer_div">
        <div class="scroll-content-left"><div>
        </div></div>
        <div class="scroll-content-right">
          <div> text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
          </div>
        </div>
    </div>
<div style="height: 600px; background-color: yellow;"></div>

JSFiddle.

Answer 2

body {
  font-family: "Lato", sans-serif; font-size:12px;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 15px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
 
  <h2>Sidebar</h2>
  <p>This sidebar is of full height (100%) and always shown.</p>
  <p>Scroll down the page to see the result.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>