-
Notifications
You must be signed in to change notification settings - Fork 747
Description
https://drafts.csswg.org/css-scrollbars-1/
Following on from my previous proposal of scrolling elements that have no "natural" overflow (which this doesn't depend on but would be a smart addition for that), there are elements that have fixed, non-scrollable areas. You can sometimes solve this problem by using other elements to separate the scrollable area. However, sometimes they may converge on both axis at a specific area, but outside of that area the content is still scrollable on one of the axis. That's not a great way of articulating the problem, I suppose, but here is an image that might help:
In this example, the green area represents horizontally-scrollable content and the red area represents vertically-scrollable content. Because of how scrollbars automatically take up 100% of the available height or width of an element, you can't limit them to the area that will actually change if you move those bars.
The idea I had for this was just to define a new property, e.g. scroll-area
that allows you to set the rectangle for the intersecting scrollable area, so that the scrollbars don't overlap non-scrollable areas on their respective axis.
:host {
scroll-area: inset(10%, 0, 0, 10%);
}