[csswg-drafts] [css-overflow] Positioning Scrollbars on top or left of container

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

== [css-overflow] Positioning Scrollbars on top or left of container ==
>From time to time, I have encountered cases where having a horizontal scrollbar at the top or left would be more helpful than having it at the bottom. For example, consider a long table that forces a vertical scrollbar. Also, it has so much content that the space required on horizontal axis is more than what viewport width can provide. 

Or when something like [bootstrap responsive table](https://v4-alpha.getbootstrap.com/content/tables/#responsive-tables) is needed, which has a horizontal scroll in smaller screen-size.

A lot of times, due to the amount of vertical content, the presence of a horizontal scrollbar is not known to the end user or they have to scroll further down where they can't see table headers anymore. As a result, users don't realize that the content can be scrolled. 

The situation is worse for mobile browsers because they generally have overlay scrollbars which only appear when you at least tap on the content. 

Chrome on phones at least give a flash as to which containers have scrollbars and then it goes away.


In these sort of cases and others like (RTL languages) wouldn't it be great to have an option to change the position of the scrollbars?

Right now, the trick that I use is something like this.
```css
.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
} 
.child {
  transform: rotateX(180deg);
}
```

This way, the horizontal scrollbar appears on top. This hack however isn't all that great and has it's own problems.

I know that scrollbar is a browser chrome thing and it's still not allowed to style by end users for reasons. But can there be properties that at least let the users set the position of scrollbars?

For example
```css
.parent{
  scrollbar-x-position: top; /*either top or bottom, default is bottom or dir based*/
  scrollbar-y-position: left; /*either left or right, default is right or dir based*/
}
```

I'll be happy to know the reasons if this was thought before and dropped.

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

Received on Tuesday, 25 April 2017 15:01:57 UTC