스크롤바 위치 상하 반전시키기 change scroll bar position

이번에 처음으로 브라우저 기본 scrollbar 의 위치를 바꿔달라는 요청이 왔다.

( overflow-x:auto;  되어 있는 div 내에 큰 table이 있어서 스크롤바가 생기는 scroll table 형식이었는데, 스크롤바를 테이블 하단이 아니라 위에 나타나게 해달라고 함)

찾아보니 생각보다 스크롤바 위치 반전은 간단. css rotateX를 이용하면 된다.

 

html

<div class="Container Flipped">
    <div class="Content">I'm in Content and I'm very long</div>
</div>

 

css

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

 

 

출처 

https://stackoverflow.com/questions/18997724/how-to-change-scroll-bar-position-with-css

How to change scroll bar position with CSS?

 

* 여기서 테스트도 바로 가능

https://jsfiddle.net/avrahamcool/uPwfn/2/