htmlcssscrollbar

How to change scroll bar position with CSS?

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

Solution

  • 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 */
}