Переполнение div в середине страницы завершает прокрутку sh до начала прокрутки тела

Question

Я пытаюсь добавить элемент div с атрибутом прокрутки переполнения, который будет включен в прокрутку тела.

Например, при прокрутке страницы 1 до 3 на моей странице 2 отображается переполнение: прокрутка дела. Поведение, которого я пытаюсь достичь - это момент, когда начало страницы 2 достигает вершины, тело перестает прокручиваться, а div внутри ДОЛЖЕН заканчиваться прокруткой вниз sh, прежде чем перейти к странице 3.

.containerPage1 {
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
    color: black;
}
.container {
     min-height: 100vh;
    display: flex;
    position: relative;
    color: black;
    width: 100%
}

.leftDiv {
     position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    width: 50%;
    border: 2px green solid;
    pointer-events: none;
    z-index: 3;
    margin: 5;
    justify-content: center;
    align-items: center;
    
   /*  background-color: grey; */
    
}

.rightDiv {
    height: 100vh;
    width: 100%;
    display: block;
    
 overflow: scroll;
    border: 15px red solid;
    z-index: 1;
}

.innerRightDiv {
    display: inline-block;
    width: 47%;
    float: right;
    border: 10px green solid;
    z-index: 2;
}

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

<div class="container">
  <div class="leftDiv">
     <div>stuff</div><div>stuff</div><div>stuff</div>
     <div>stuff</div><div>stuff</div><div>stuff</div>
     <div>stuff</div><div>stuff</div><div>stuff</div>
  </div>
  
  <div class="rightDiv">
    <div class="innerRightDiv">
        <div>page3</div><div>page3</div><div>page3</div><div>page3</div><div>page3</div><div>page3</div>
        <div>page3</div><div>page3</div><div>page3</div><div>page3</div><div>page3</div><div>page3</div>
        <div>page3</div><div>page3</div><div>page3</div><div>page3</div><div>page3</div><div>page3</div>
        <div>page3</div><div>page3</div><div>page3</div><div>page3</div><div>page3</div><div>page3</div>
    </div>
  </div>

</div>


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

JSFIDDLE

Таким образом, в этом демонстрационном примере зеленое поле имеет собственную прокручиваемую область и ее можно прокручивать до завершение зеленой рамки достигло конца.

Скорее всего, это можно исправить с помощью javascript, однако я не знаю, с чего начать привязку страницы.

Answer 1

Решением, которое я искал, было просто установить левый div с позицией ручки. Это дало бы эффект прокручивания половины страницы.

Я изменил оригинал css, чтобы плавать два внутренних элемента div рядом, вместо того, чтобы устанавливать внутренние элементы div для отображения встроенного блока.

inline-block не позволяет позиционировать как залипание.

CSS

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

HTML

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

Answer 2

.main_container{
  height:100vh;
  overflow-y:scroll
}

<div class='main_container' >

</div>

когда ваш div превышает 100 vh, он автоматически прокручивается