My layout consists of a div container that occupies 80% of the screen, with fixed sidebars on both the left and right taking up 10% each. The content within the div is quite large, so I've applied overflow: hidden to it in order to hide excess content. However, when users scroll down, the scrolling action bypasses the div and only affects the body.
If I change the div to overflow: scroll, users will initially scroll within the div, but then scrolling abruptly stops without affecting the body.
I've also observed that hovering over the overflow: scroll div enables scrolling, while hovering over the fixed sidebars causes the body to scroll instead.
This behavior is not ideal for my requirements. What I'm aiming for is for the hidden div to scroll from top to bottom first, and then for the body to start scrolling once the end is reached.
In an attempt to achieve this, I have tried detecting when the div container reaches the top and using $(#myDiv").focus(), but even then, if the mouse hovers over the sidebars, the body still scrolls.
Is there a solution to make this work as intended? Particularly with overflow:hidden, it seems like scrolling is restricted.
You can view an example at codepen.io/OrvaldMaxwell/pen/Yraryb where I need the "scrollMeAutoPLS" div to scroll first before transitioning to scrolling the body.