CODEWITHSUNDEEP
htmlcss
Nick Parsons
Nick Parsons

Reputation: 50974

Make overflow content scroll within div

If you look at the snippet below, you will see text within a div with an image. I'm trying to make it so that when I scroll, the content in the image div will scroll while having the image at a fixed height.

At the moment the div itself is moving, however, I would like the text to scroll instead.

Once the content inside this div has finished scrolling, I would like the page to scroll to the next blue div.

body {
  margin: 0;
}

.box {
  height: 100vh;
  width: 100%;
}

.box .content {
  width: 50%;
  height: 100%;
  float: right;
  overflow: hidden;
}

#red {
  background-image: url("https://images.unsplash.com/photo-1512389142860-9c449e58a543?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
  background-size: 100% 100%;
  background-attachment: fixed;
}

#blue {
  background: blue;
}
<div class="box" id="red">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

<div class="box" id="blue">
</div>

I've tried to add:

.content {
  overflow-y: scroll;
}

However, this doesn't achieve exactly what I want. The issue with this is that it adds a scroll bar to the right of the content, and the content only scrolls when it is focused. Lastly, it doesn't scroll down to the next blue div once the text has finished scrolling.

Is there anyway to achieve this using CSS? Perhaps with position: sticky maybe?

Upvotes: 2

Views: 84

Answers (2)

Temani Afif
Temani Afif

Reputation: 274307

Adjust the background properties like below to have your image fixed while scrolling:

body {
  margin: 0;
}

.box {
  width: 100%;
  overflow: hidden;
}

.box .content {
  width: 50%;
  float: right;
}

#red {
  background-image: url("https://images.unsplash.com/photo-1512389142860-9c449e58a543?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
  background-size: 100% 100vh; /* make the height 100vh */
  background-attachment:fixed; /* this will do the magic */
}

#blue {
  background: blue;
  min-height:300px;
}
<div class="box" id="red">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

<div class="box" id="blue">
</div>

You can also have a different effect using sticky and pseudo element:

body {
  margin: 0;
}

.box {
  width: 100%;
  position:relative;
  z-index:0;
}

.box .content {
  width: 50%;
  margin-left:auto;
  overflow:hidden;
  margin-top:-100vh;
}

#red::before {
  content:"";
  position:sticky;
  display:block;
  top:0;
  left:0;
  right:0;
  height:100vh;
  z-index:-1;
  background-image: url("https://images.unsplash.com/photo-1512389142860-9c449e58a543?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
  background-size: 100% 100%;
}

#blue {
  background: blue;
  min-height:300px;
}
<div class="box" id="red">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

<div class="box" id="blue">
</div>

Upvotes: 3

Prajwol Onta
Prajwol Onta

Reputation: 1478

Try adding overflow-y: scroll; to .box and remove it from .content: 

.box {
   height: 100vh;
   width: 100%;
   overflow-y:scroll;
 }

Upvotes: 0

Related Questions