I have a container with internal scrolling. Inside, there is content that can be scrolled through, along with a sidebar child element set as position: fixed;.
When I hover over the parent and scroll, the contents scroll properly. But, if I hover inside the fixed child (still within the parent's boundaries) and try to scroll, it does not respond:
<style>
body,
html {
margin: 0;
}
#container {
position: relative;
width: 100%;
height: 100vh;
overflow-y: auto;
}
#sidebar {
position: fixed;
right: 10px;
width: 100px;
top: 10px;
height: calc(100% - 20px);
background-color: red;
}
</style>
<div id='container'>
<div id='sidebar'>
<a href='https://google.com/'>Clickable Link</a>
Scrolling doesn't work when hovering here.
</div>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
... and so on. Scrolling works when hovering here.
</div>I am looking for a way to allow the scroll event to propagate from the fixed child to its parent with overflow, enabling the user to scroll the main container even while hovering over the child. Is this achievable?
I've attempted using JavaScript to capture scroll events on the child and pass them up to the parent, but unfortunately no scroll events are detected (probably because the child has nothing to scroll internally). Different positioning configurations of the parent element (position:relative;, position:absolute;, position:fixed;) were also tried without success. The issue seems to occur specifically with a fixed child, and changing it to absolute is not an option.
If possible, I would prefer a solution that doesn't involve JavaScript. Suggestions for HTML-only, HTML and CSS, or JavaScript-only solutions would be appreciated.
I'm familiar with this question, but the proposed workaround doesn't function as expected since scrolling while hovering over the fixed child doesn't trigger a scroll event for either the child or parent. The alternative suggestion of moving the child outside the parent isn't feasible in my case.
Edit: Harsh Karanpuria recommended adding pointer-events:none; to the sidebar. While this achieved the desired scrolling behavior, it rendered elements in the sidebar unclickable, which is not ideal. Subsequently, I tried setting child elements of the sidebar as pointer-events: all;, which allowed clicking them but once again disabled scrolling when hovering over those grandchildren.