Stop parent div scrollbar (overflow) when child overlays on it by its own
I have 3 divs nested like this:
- container
- box
- content-box
- box
I want vertical scrollbars to appear when there is limited space in the view space. To do this, I style the overflow-y: auto;
container div and div-div-content. I want both of these scrollbars, but not for them, to be displayed at the same time.
An action pops up that opens the drawer, and until it is triggered, only the fork of the container is shown with a scroll bar. After opening the drawer, the drawers and the drawer contents are overlaid on the container and I want the container's scrollbar not to exist and instead only showing the content scrollbar.
This screenshot, when the drawer is open, shows the problem. There is a red border for the container div, blue for the box, and green for the contents of the box. I would like to prevent the outer scrollbar that is on the container div from showing up.
Of course, if the limiting of the viewport occurs when the drawer is already open, that's not a problem. This is a problem where the viewport was already constrained before the drawer was opened, so the scrollbar for the container div appears, then we open the drawer, slide the drawer and the contents of the drawer to the top, but the scrollbar for the contents of the drawer should be the only one.
The reason I am creating additional scrollbars is because this container sticks to the top of the viewport when the main page is scrolled, so the content may become inaccessible, which is undesirable.
I have a Javascript solution for this, but you are looking for CSS.
Here's a scenario that is not accurate but close to the situation. For some reason, scrollbars are only shown on Windows so far. Peering into this. https://jsfiddle.net/8z49z1dj/5/
Any ideas?
Thank!
source to share
In your script, you are explicitly setting overflow-y
in the container, but you only need that when the drawer is not open. You can add an additional class to indicate whether the drawer is open or not for the parent, for example:
document.getElementsByClassName("container")[0].className += " has-open-drawer";
Then, in your CSS, you can override this overflow behavior like this:
.container.has-open-drawer {
overflow-y: hidden;
}
Remember that you may need to remove this class again if the user can close the drawer.
See my fork with changes here on the JSFiddle .
source to share