I have three divs in the following manner: outermost div then inside it the middle div and then inside it the innermost div.
like this ...
.outer{
width: 100%;
height: 110vh;
background-color: red;
overflow: hidden;
}
.middle{
width: 100%;
height: 100vh;
border: 3px solid black;
overflow: scroll;
}
.inner{
width: 100%;
height: 102%;
background-color: cyan;
}<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>what I want to know is, when I scroll inside the innermost div then it scrolls and if it is scrolled completely then it stops, and then when I stop the scroll of the mouse wheel and start again then the window scrolls ...But what I want is, to scroll in one go.. like if I'm scrolling the inner div when it is completely scrolled then the window scroll should start immediately without actually stopping the mouse wheel and starting again.
Is it even possible?
Give this a try. I wouldn't recommend using view height especially if you want scroll to function as intended.
html,
body {
height: 100%;
width: 100%;
}
.outer {
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.middle {
width: 100%;
height: 100%;
border: 3px solid black;
overflow: scroll;
}
.inner {
width: 100%;
height: 100%;
background-color: cyan;
}<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>