如何构建两个相互限制滚动深度的独立可滚动div

Question

我正在尝试重新创建 this page 的滚动行为。

基本上折叠上方有两个可滚动的列，但一个滚动深度需要受限于/与另一列的当前滚动深度相关。如果您在#scrollOne 上达到 X 像素的滚动深度，则 #scrollTwo 应该向上滚动到某个滚动深度，然后停止滚动。

我在一个网格容器中有两个 div：

<div class="container">
   <div id="scrollOne" class="scrollable">{....content....}</div>
   <div id="scrollTwo" class="scrollable">{....content....}</div>
</div>
<div>....other content below...</div>

还有以下 CSS：

.container {
  overflow: hidden;
}
.scrollable {
  overflow-y: scroll;
  height: 75vh;
  scrollbar-width: none;
}

这一切都如我所愿，除了我无法让两个 div 在需要时相互移动。任何帮助或见解将不胜感激。

Answer 1

您可以通过粘性位置实现。

.container {
  position: relative;
}
section, aside{
  box-sizing: border-box;
  display: inline-block;
  float: left;
  padding: 20px;
}
section{
  width: 60%;
}
aside{
  margin-top: 100px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 40%;
}
.clear-prefix {
    content: '';
    display: block;
    clear: both;
}

<div class="container">
 <section>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </section>
 <aside>Aside</aside>
 <div class="clear-prefix"></div>
</div>