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

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

Answer 1

仅使用CSS：

右/左翻转： 工作小提琴

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

Answer 2

试试这个。 希望这可以帮助

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

Answer 3

这是另一种方法，通过将rotating element与scrollbar一起rotating element 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>