scrolling demo

how ot anchor the page and have the div scrolling as part of the body scroll??

by Manju06

HTML

<div class="containerPage1">
  <div>
      page1
  </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>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
        <div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div><div>page2</div>
    </div>
  </div>

</div>


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

CSS

.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%;
    border:1px solid yellow;
}

.leftDiv {
     position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    width: 49%;
    pointer-events: none;
    z-index: 3;
    justify-content: center;
    background-color: lightgrey;
    align-items: center;
    margin: 5px;
    
   /*  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;
}