[csswg-drafts] [css-scrollbars][proposal] Define the scrollable area of an element (#3428)

andyearnshaw has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scrollbars][proposal] Define the scrollable area of an element ==
https://drafts.csswg.org/css-scrollbars-1/

Following on from my [previous proposal of scrolling elements that have no "natural" overflow](https://github.com/w3c/csswg-drafts/issues/3397) (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:

![](https://user-images.githubusercontent.com/1826067/49810343-f25e0f00-fd58-11e8-8d8c-521ad7c25462.png)

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.

```css
:host {
    scroll-area: inset(10%, 0, 0, 10%);
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3428 using your GitHub account

Received on Tuesday, 11 December 2018 15:58:34 UTC