如何改变滚动条的位置与 CSS？

小开

试试这个，希望有用

<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;
}

小开

最佳答案

Using CSS only:

Right/Left 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将 content包装成另一个元素，通过 scrollbar包装成 180deg,，通过 rotating包装成 wrapper包装成 -180deg。 Check the snippet below

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>

小开

there is a simple way actually, 只需将容器元素(包含滚动条的那个)的“ direct”属性更改为“ rtl”，将子元素更改为“ ltr”

/*this is the container*/
#home {
direction: rtl;/*this here*/
padding-left: 20px;
}


/*this is the child*/
.content-container {
direction: ltr;/*this here*/
width: 100%;
}