How to change scroll bar position with CSS?

Mohsen Safari picture Mohsen Safari · Sep 25, 2013 · Viewed 190.3k times · Source

Is there any way to change position of scroll bar from left to right or from bottom to top with CSS ?

Answer

avrahamcool picture avrahamcool · Sep 25, 2013

Using CSS only:

Right/Left Flippiing: Working Fiddle

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Top/Bottom Flipping: Working Fiddle

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}