左div固定右div滚动不能正常工作

Question

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

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

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

JSFiddle示例

代码：

null

.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>

null

Answer 1

null

css lang-css prettyprint-override">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>

Answer 2

如果你想要和你在评论中提供的链接中的效果一样，你得：

1. 删除粘性的父分区的溢出属性。

• 这一个值得强调，因为我想你不是这么想的，所以：你就是不能有它在那里。如果您想要有粘性部分，那么就没有css可以使内部滚动条滚动。

阅读这篇很棒的教程。从您的措辞来看，我认为您认为scroll-content-left和scroll-content-rightdiv是“滚动的”，但它们没有；只是scroll-content-left被贴上了。

null

.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%;
}

html lang-html prettyprint-override"><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>