I'm currently working on a webpage that features a sidebar, along with other elements as shown below:
https://i.sstatic.net/gf7dX.png
In this design, the Your Friends section represents the sidebar. However, I have noticed that when I hover over the sidebar and try to scroll, it's actually the main page that scrolls instead of the sidebar itself.
My ideal scenario would be for the main page to scroll down only when my cursor is outside the sidebar, and for the sidebar to scroll down independently when my cursor is within its boundaries.
This snippet shows the CSS code for my sidebar:
header .c-header-container .c-side-bar-right {
position: fixed;
top: 80px;
bottom: 37px;
right: 0px;
background-color: var(--side-bar-color);
display: flex;
flex-direction: column;
padding: 1rem;
border: 4px solid black;
border-top: none;
width: 20%;
z-index: -1;
overflow-y: scroll;
}
Can anyone suggest a way to achieve this desired functionality?