반응형
CSS로 스크롤 막대 위치를 변경하는 방법은 무엇입니까?
CSS를 사용하여 스크롤 막대의 위치를 왼쪽에서 오른쪽으로 또는 아래에서 위로 변경하는 방법이 있습니까?
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 */
}
여기에 또 다른 방법으로, 인 rotating element
과 scrollbar
위한 180deg,
포장 그것의 content
다른 구성 요소로하고 rotating
있는지 wrapper
에 대한 -180deg
. 아래 스 니펫을 확인하세요.
div {
display: inline-block;
width: 100px;
height: 100px;
border: 2px solid black;
margin: 15px;
}
#vertical {
direction: rtl;
overflow-y: scroll;
overflow-x: hidden;
background: gold;
}
#vertical p {
direction: ltr;
margin-bottom: 0;
}
#horizontal {
direction: rtl;
transform: rotate(180deg);
overflow-y: hidden;
overflow-x: scroll;
background: tomato;
padding-top: 30px;
}
#horizontal span {
direction: ltr;
display: inline-block;
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=vertical>
<p>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content</p>
</div>
<div id=horizontal><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
</div>
이것을 시도하십시오. 도움이 되었기를 바랍니다
<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;
}
참고 URL : https://stackoverflow.com/questions/18997724/how-to-change-scroll-bar-position-with-css
반응형
'developer tip' 카테고리의 다른 글
Pandas 데이터 프레임에서 셀을 NaN으로 설정하는 방법 (0) | 2020.10.17 |
---|---|
Rails Active Record find (: all, : order =>) 문제 (0) | 2020.10.17 |
안드로이드 툴바 팝업 테마 대 테마 (0) | 2020.10.17 |
문자열을 대문자로 분할 (0) | 2020.10.16 |
JavaScript의 포인터? (0) | 2020.10.16 |