Re: Proposal for a scrollbar-safe width calculation

On Thu, Jan 24, 2013 at 2:16 PM, Markus Ernst <derernst@gmx.ch> wrote:
> Discussing the scrollbar aspect of vw/vh units, several use cases came to my
> mind where I missed a possibility to take a possible scrollbar into account
> while setting widths in the past:
>
> Use case 1: Centered web page
> Very many web pages are horizontally centered using a container element that
> has the left and right margins set to "auto". Usually, they suffer from a
> horizontal jump of 8px when navigating between pages that have a vertical
> scrollbar or not. In my authoring practice, I had several discussions on
> this effect with clients or designers who demanded the page to stay in it's
> place regardless of the amount of content. Anyway, after I suggested to
> force scrollbars, they accepted the jump as the lesser evil (still
> considering it as an evil).
>
> Use case 2: Scrolling table with fixed header
> You put a table into a container div in order to make it scrollable inside
> the page. You use a negative top margin to hide the table header, and
> duplicate the header in a separate table that you put on the top of the
> container div. Now, if there are enough rows to trigger a vertical
> scrollbar, the columns of the visible header table do no longer match the
> columns of the scrollable table. (There are actually jQuery plugins for
> scrollable tables available, that do exactly this.)
>
> The solution I propose is a property to be set on the container element that
> affects the calculation of the widths of the children (feel free to propose
> better wordings):
>
> width-calculation: [normal | reserve-scrollbar]
>
> When overflow computes to "auto", and the UA displays a non-overlayed
> scrollbar at all, "width-calculation: reserve-scrollbar" will shrink child
> elements to fit inside a possible scrollbar, if they have no width
> specified, and accordingly reduce the result if widths are specified in %.
>
> Use case 1 would then simply be solved via
> body { width-calculation: reserve-scrollbar }
>
> In use case 2, the property will be applied to the containers of both header
> and content tables, so that the tables have identical widths regardless of
> whether a scrollbar is triggered or not.

As far as I can tell, this is equivalent to changing the scrollbar to
be an "overlay" one that doesn't take up space.  Am I right?

~TJ

Received on Friday, 25 January 2013 18:46:06 UTC