左 div 固定右 div 可滾動無法正常工作

Question

我有一個部分，其中左 div 是固定的，右 div 是可滾動的，但右 div 內容甚至在滾動頂部到達該部分之前滾動。 我希望右 div僅在到達 div 頂部或 div 底部時滾動（從底部向上滾動時），但它隨時滾動（不一致 - 當我快速滾動時，它開始在中間滾動節等）。

當我快速向上或向下滾動時，它甚至會跳過這一部分，但我希望它永遠不會被跳過。

嘗試快速滾動和慢速滾動。 滾動可以隨時工作：

JSFiddle 示例

代碼：

 .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

如果您想要與評論中提供的鏈接中的效果相同，則必須：

1. 移除粘性父 div 的overflow屬性。

• 這一點值得強調，因為我認為您的預期並非如此，所以：您不能在那里擁有它。 如果您想要粘性部分，則沒有 css 可以使內部滾動條滾動。

2. 設置粘性 div 的top屬性。

閱讀這個很棒的教程。 根據您的措辭，我認為您認為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>

JSF中。

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>