CSS로 스크롤 막대 위치를 변경하는 방법은 무엇입니까?


97

CSS를 사용하여 스크롤 막대의 위치를 ​​왼쪽에서 오른쪽으로 또는 아래에서 위로 변경하는 방법이 있습니까?


브라우저의 스크롤바?
Awais Umar 2013 년

이 플러그인을 사용 해보세요. jscrollpane.kelvinluck.com 이 jquery 플러그인을 사용하면 스크롤 막대에서 사용자 정의 CSS를 수행 할 수 있습니다.
Awais Umar 2013 년

내가 생각할 수있는 유일한 것은 사용자 정의 스크롤바와 스타일을 원하는대로 배치하는 것입니다. @AwaisUmar가 제안한 jscrollpane 플러그인은 제가 과거에 사용 해왔고 꽤 좋은 시작입니다.
Zhihao

모든 브라우저가 아니라 특정 브라우저에 대해 알고 있다면 알려주세요
Mohsen Safari

순수한 CSS로는 할 방법이 없습니다.
Itay

답변:


127

CSS 만 사용 :

오른쪽 / 왼쪽 Flippiing : 작업 바이올린

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

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

위 / 아래 뒤집기 : 작업 바이올린

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

1
divChrome 29에서 위쪽 / 아래쪽 뒤집기 바이올린 에 위쪽 스크롤바가 표시되지 않습니다 .
Mathijs Flietstra

분명히 그것은 브라우저 버그 입니다. 나는 대답에서 내 바이올린을 업데이트했습니다. 바로 확인해보세요.
avrahamcool 2013-09-25

Google Chrome 35.0.1916.153에서 이중 회전시 입력 / 선택에 몇 가지 문제가 있습니다. FF에서는 모든 것이 정상적으로 작동합니다.
lechup

@lechup 바이올린을 게시 할 수 있습니까? 도와 드리겠습니다.
avrahamcool 2014-06-16

1
방금 Edge에서 버그를 발견했습니다. 뒤집힌 내용에 각 행에 체크 박스가있는 테이블이 포함되어 있으면 포인터 이벤트가 엉망이됩니다. 마지막 확인란을 선택하면 첫 번째 확인란이 선택되고 그 반대의 경우도 마찬가지입니다. 바이올린 참조 jsfiddle.net/uPwfn/646을
제임스 Cazzetta에게

4

여기에 또 다른 방법으로, 인 rotating elementscrollbar위한 180deg,포장 그것의 content다른 구성 요소로하고 rotating있는지 wrapper에 대한 -180deg. 아래 스 니펫을 확인하세요.


1
영리하지만 적어도 내 리눅스 파이어 폭스에서는 핸들러와 스크롤바의 삽입 / 아웃 셋 효과를 바꾸는 부작용이 있습니다. 매우 혼란 스럽습니다.
Martin Tournoij 2016 년


@Carpetsmoker 예, rtlltr방향으로 고정되었습니다 . 그것은 기본 스크롤 efect에도,해야합니다 그래서 scroll-down 하단에, 그리고 scroll-up상단에
프로세스

1
예, 수직은 고정되어 있지만 수평은 아닙니다.
Martin Tournoij

3

이것을 시도하십시오. 도움이 되었기를 바랍니다

<div id="single" dir="rtl">
    <div class="common">Single</div>
</div>

<div id="both" dir="ltr">
    <div class="common">Both</div>
</div>



#single, #both{
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: 0 auto;
    border: 1px solid gray;
}


.common{
    height: 150px;
    width: 150px;
}

dir새로운 것을 배운 것을 사용하는 영리한 아이디어 ,하지만
Endless
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.