Is there any way to change position of scroll bar from left to right or from bottom to top with CSS ?
有没有办法用CSS从左到右或者从下到上改变滚动条的位置?
3 个解决方案
#1
84
Using CSS only:
使用CSS只有:
Right/Left Flippiing: Working Fiddle
左/右Flippiing:小提琴工作
.Container
{
height: 200px;
overflow-x: auto;
}
.Content
{
height: 300px;
}
.Flipped
{
direction: rtl;
}
.Content
{
direction: ltr;
}
Top/Bottom Flipping: 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 */
}
#2
1
Try this out. Hope this helps
试试这个。希望这有助于
<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;
}
#3
1
Here is another way, by rotating element
with the scrollbar
for 180deg,
wrapping it's content
into another element, and rotating
that wrapper
for -180deg
. Check the snippet below
这里还有另一种方法,使用滚动条为180deg旋转元素,将其内容封装到另一个元素中,并将包装器旋转为-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
84
Using CSS only:
使用CSS只有:
Right/Left Flippiing: Working Fiddle
左/右Flippiing:小提琴工作
.Container
{
height: 200px;
overflow-x: auto;
}
.Content
{
height: 300px;
}
.Flipped
{
direction: rtl;
}
.Content
{
direction: ltr;
}
Top/Bottom Flipping: 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 */
}
#2
1
Try this out. Hope this helps
试试这个。希望这有助于
<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;
}
#3
1
Here is another way, by rotating element
with the scrollbar
for 180deg,
wrapping it's content
into another element, and rotating
that wrapper
for -180deg
. Check the snippet below
这里还有另一种方法,使用滚动条为180deg旋转元素,将其内容封装到另一个元素中,并将包装器旋转为-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>