如何用CSS更改滚动条位置?
有没有办法改变滚动条的位置从左到右或从下到上与CSS?
仅使用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 */ }
试试这个。 希望这可以帮助
<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; }
这是另一种方法,通过将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>