CODEWITHSUNDEEP
javascripthtmlcssreactjs
muyen
muyen

Reputation: 31

overflow div in the middle of the page finish scrolling before the body starts scrolling

I am trying to add a div that has an overflow scroll attribute, be incorporated into the body scroll.

For example, when scrolling down to page 1 to 3, My page 2 contains an overflow: scroll div. The behavior I am trying to achieve is the moment the beginning of page 2 reaches the top, the body stops scrolling, while the div inside MUST finish scrolling down, before continuing down to page 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

So in this demo, the green box has its own scrollable and its possible to scroll down before completing the green box has reached the end.

This can most likely be fixed with javascript, however, I have no idea where to start anchoring a page.

Upvotes: 2

Views: 800

Answers (2)

muyen
muyen

Reputation: 31

The solution I was looking for was simply setting the left div with a stick position. This would give the effect of half the page is scrolling.

I changed the original css to float the two inner divs side by side instead of setting the inner divs to display inline-block.

inline-block does not allow position to be set as a sticky.

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>

Upvotes: 1

arslan
arslan

Reputation: 1144

.main_container{
  height:100vh;
  overflow-y:scroll
}
<div class='main_container' >

</div>

when your div exceed to 100 vh it will automaticlaly scrollable

Upvotes: 0

Related Questions