Issue

This Content is from Stack Overflow. Question asked by Brian Hinkle

How can I make 2 overlapping divs both scroll instead of just the one that is on top? Normally when you scroll it will only scroll the top most div since it is blocking the one under it. But I want both to scroll.

What I want seems very simple so I’m hoping it can be done without js, but if js is needed I’ll still try it.

Solution

 .revolvContainer {
      background-color: rgb(255, 255, 255);
      position: relative;
      height: 200vh;
    }
    
    .containerFirst {
      display: flex;
      position: sticky;
      top: 0;
      height: 100vh;
    }
    
    .containerSecond {
      margin-top: -100vh;
      height: 100vh;
      position: relative;
      z-index: 40;
      background-color: rgb(98, 100, 111);
    }

Am not sure what do you mean by scrolling both at the same time?

This Question was asked in StackOverflow by Brian Hinkle and Answered by Naroto-Hasaka It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.