I am working with a split layout featuring two columns, and I need the ability to make each column separately scrollable. Due to using a specialized scroll-to function, I cannot use overflow-y: scroll; or overflow: auto;. I am looking for alternative solutions to achieve this.
My Requirements:
- When the cursor is on the left side, the entire page should be scrollable while the right area remains fixed.
- If the cursor moves to the right side, the whole page should be able to scroll while the left area stays fixed.
Is it possible to accomplish this using only CSS, or perhaps with the help of jQuery?
* {
font-size: 5vw;
}
body {
margin: 0;
padding: 0;
display: flex;
}
#left,
#right {
width: 50%;
position: fixed; /* One side should be fixed, other side scrollable */
}
#left {
background: rgb(200, 200, 200);
left: 0;
}
#right {
right: 0;
}<div id="left">Lorem ipsum dolor sit amet...</div>
<div id="right">Ut wisi enim ad minim veniam...</div>Any assistance in achieving this functionality would be greatly appreciated!