CODEWITHSUNDEEP
cssoverflow
Tam Borine
Tam Borine

Reputation: 1554

Stop parent div's scrollbar (overflow) when child overlaps with it's own

I have 3 divs nested like so:

I want vertical scrollbars to appear when viewport space is restricted. To do this I'm giving the style overflow-y: auto; to the container div and the drawer-content div. I want both these scrollbars but not for them to both appear at the same time.

There is an action which opens the drawer and before it is triggered only the container div is visible with it's scrollbar. After opening the drawer, the drawer and drawer-content divs overlay the container and I want the container's scrollbar to not exist, and only the drawer-content's scrollbar to appear instead.

This screenshot when the drawer is open shows the problem. There is a red border for container div, blue for drawer and green for drawer-content. I'd like the outer scrollbar, which is on container div, not to appear.

enter image description here

Of course if viewport restriction occurs once the drawer is already open, this is a non-issue. It's an issue when the viewport was already restricted before opening the drawer, so the scrollbar for Container div appears, then we open the drawer and drawer and drawer-content appear on top, but drawer-content's scrollbar should be the only one.

The reason I'm creating extra scrollbars is because this container sticks to the top of the viewport when scrolling down the main page, thus content could become inaccessible, which is undesirable.

I've got a Javascript solution to this but looking for a CSS one.

Here's a fiddle which is not exact but close to the situation. For some reason the scrollbars only show on Windows so far. Looking into that. https://jsfiddle.net/8z49z1dj/5/

Any ideas?

Thanks!

Upvotes: 3

Views: 2149

Answers (1)

Gigabyte
Gigabyte

Reputation: 581

In your fiddle, you're explicitly setting the overflow-y on the container, but you'll only want that when the drawer isn't open. You can add an extra class indicating the drawer is open or not on the parent, like so:

document.getElementsByClassName("container")[0].className += " has-open-drawer";

Then, in your CSS you're able to override that overflow behaviour like so:

.container.has-open-drawer {
    overflow-y: hidden;
}

Bear in mind you might need to remove that class again if the user is able to close the drawer.

See my fork with the changes here on JSFiddle.

Upvotes: 1

Related Questions