如何用CSS更改滚动条位置？

Question

有没有办法用CSS从左到右或从下到上改变滚动条的位置？

Answer 1

仅使用CSS：

右/左翻译：Working Fiddle

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

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

上/下翻：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 */
}

Answer 2

另一种方法是，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> {1}} (defun ifcall (x) (if (typep x 'FUNCTION) (funcall x) (x))) 。 查看下面的代码段

＆＃13;

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

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