Javascript 页面中间的溢出div在正文开始滚动之前完成滚动。

我试图添加一个具有溢出卷轴属性的div，并将其合并到主体卷轴中

比如说,， 当向下滚动到第1页到第3页时，我的第2页包含一个溢出：scroll div。我试图实现的行为是当第2页的开头到达顶部时，正文停止滚动，而其中的div必须完成向下滚动，然后才能继续向下滚动到第3页

.containerPage 1{
最小高度：100vh；
证明内容：中心；
对齐项目：居中；
显示器：flex；
颜色：黑色；
}
.集装箱{
最小高度：100vh；
显示器：flex；
位置：相对位置；
颜色：黑色；
宽度：100%
}
.leftDiv{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
显示器：flex；
宽度：50%；
边框：2个绿色实体；
指针事件：无；
z指数：3；
保证金：5；
证明内容：中心；
对齐项目：居中；
/*背景颜色：灰色*/
}
.rightDiv{
高度：100vh；
宽度：100%；
显示：块；
溢出：滚动；
边框：15px红色固体；
z指数：1；
}
.innerRightDiv{
显示：内联块；
宽度：47%；
浮动：对；
边框：10px绿色固体；
z指数：2；
}

你好
东西
东西
东西
第3页第3页第3页第3页第3页第3页第3页
第3页第3页第3页第3页第3页第3页第3页
第3页第3页第3页第3页第3页第3页第3页
第3页第3页第3页第3页第3页第3页第3页
你好

.main\u容器{
高度：100vh；
溢出y：滚动
}

---

我所寻找的解决方案就是简单地将左div设置为stick（斗杆）位置。这将产生一半页面滚动的效果

我将原来的css更改为并排浮动两个内部div，而不是将内部div设置为显示内联块

内联块

不允许将位置设置为粘性块

CSS

HTML

第1页
这里有
内容文本
内容文本
内容文本

内容文本
内容文本
内容文本

内容文本
内容文本
内容文本

内容文本
内容文本
内容文本

第3页

我认为你的代码是有效的。。。取决于滚动捕捉发生的位置。在可滚动的容器中包含可滚动的容器似乎总是有特殊的行为。如果用户指向第二页，则再次发生滚动，此时您的代码按原样工作，如果我在此处遗漏任何内容，您可以详细解释。@Manjuboyz Yes，当光标位于红色框内的任何位置时，代码就会工作，这个布局是我能达到的最接近我想要的行为的布局。我的问题是当从第1页向下滚动到第3页时，如何使第2页的开头固定在屏幕上，直到第2页完全向下滚动为止。然后页面可以继续正常向下滚动至第3页。（无论光标在何处。）。如果你需要另一种解释，我可以向你展示一个工作网站，我正试图模仿它。参观一下，你就会知道我在说什么about@Drew里斯：谢谢，这很简单，只需使用sticky即可。我可以通过将两个div放在一起并使其中一个变粘来实现滚动效果。我的只是一个建议/预感。你的解决方案就是有效的。你可以回答并接受你对自己问题的回答。

.containerPage1 {
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  color: black;
}
.container {
  min-height: 100vh;
  position: relative;
  color: black;
  width: 100%;
  padding: 25px;
}
.inner-div {
  float: left;
  border: 2px yellow solid;
  width: 45%;  
}
.inner-div-content {
  padding: 50px;
}
.sticky {
  position: sticky;
  top: 0;
}

<div class="containerPage1">
  <div>
    page1
  </div>
</div>

<div class="container">
  <div class="inner-div sticky">
    <div class="inner-div-content">
      Tite here
    </div>

  </div>
  <div class= "inner-div">
    <div class="inner-div-content">
      <p>Content text </p><p>Content text </p><p>Content text </p>
      <p>Content text </p><p>Content text </p><p>Content text </p>
      <p>Content text </p><p>Content text </p><p>Content text </p>
      <p>Content text </p><p>Content text </p><p>Content text </p>
    </div>
  </div>

  <div style="clear: both;"></div>
</div>


<div class="containerPage1">
  <div>
    PAGE3
  </div>
</div>