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