I set out to create a webpage featuring two fixed columns at the top and a footer at the bottom. The main goal is to have the left column remain static while the right column is scrollable.
This is what I aim to achieve -
- When the mouse hovers over the left column on top, the entire webpage should scroll up or down.
- When the mouse hovers over the right column on top, initial scrolling should only affect the right side. Once the right column has been fully scrolled, then the entire webpage should begin to scroll.
Below is a simple example illustrating my objective and the issue I am encountering:
.row-height {
height: 100vh;
}
.mid {
background-color: green;
height: 100%;
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.footer {
height: 1000px;
background: blue;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<html>
<body>
<div class="container-fluid">
<div class="row row-height">
<div class="col-sm-6 left">
Lorem ipsum dolor sit amet, consectetur adipisicing 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 culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-sm-6 mid">
(Content for right column)
</div>
</div>
<div class='footer'></div>
</div>
</body>
</html>The code above mostly functions correctly. However, when you hover over the right column and continuously scroll, it smoothly scrolls at first but once it reaches the bottom, it becomes stuck. You must pause your scrolling momentarily and then resume for the whole webpage to start scrolling.
I require the entire webpage to begin scrolling immediately upon reaching the bottom of the right column.
In my current setup, continuous scrolling causes it to become stuck and only resumes working after a brief pause.