Html 如何在左侧放置 div 滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7347532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position a div scrollbar on the left hand side?
提问by Andrew Fielden
Is it possible to specify a position (left or right hand side) for the placement of a vertical scrollbar on a div?
是否可以指定在 div 上放置垂直滚动条的位置（左侧或右侧）？
For example look at this page which explains how to use the overflow attribute. Is there some way of placing that scrollbar on the left hand side of the scrollable area?
例如，看看这个解释如何使用溢出属性的页面。有没有办法将该滚动条放在可滚动区域的左侧？
采纳答案by jasonleonhard
Working Example: JSFiddle
工作示例：JSFiddle
or
或者
Cut and paste solution that works for all major browsers (Even Safari)
适用于所有主要浏览器（甚至 Safari）的剪切和粘贴解决方案
Any height or width will work
任何高度或宽度都可以使用
<style>
.list_container {
direction: rtl;
overflow:auto;
height: 50px;
width: 50px;
}
.item_direction {
direction:ltr;
}
</style>
<div class="list_container">
<div class="item_direction">1</div>
<div class="item_direction">2</div>
<div class="item_direction">3</div>
<div class="item_direction">4</div>
<div class="item_direction">5</div>
<div class="item_direction">6</div>
<div class="item_direction">7</div>
<div class="item_direction">8</div>
<div class="item_direction">9</div>
<div class="item_direction">10</div>
<div class="item_direction">11</div>
<div class="item_direction">12</div>
</div>
Optionally add class="item_directionto each item to change the direction of the text flow back, while preserving the container direction.
（可选）添加class="item_direction到每个项目以更改文本流回的方向，同时保留容器方向。
回答by Jason Gennaro
You could try direction:rtl;in your css. Then reset the text direction in the inner div
你可以试试direction:rtl;你的css。然后在内部重置文本方向div
#scroll{
direction:rtl;
overflow:auto;
height:50px;
width:50px;}
#scroll div{
direction:ltr;
}
Untested.
未经测试。
回答by user1597594
I have the same problem. but when i add direction: rtl;in tabs and accordion combo but it crashes my structure.
我也有同样的问题。但是当我添加direction: rtl;标签和手风琴组合时，它会破坏我的结构。
The way to do it is add div with direction: rtl;as parent element, and for child div set direction: ltr;.
这样做的方法是添加 divdirection: rtl;作为父元素，并为子 div set direction: ltr;。
I use this first https://api.jquery.com/wrap/
我首先使用这个https://api.jquery.com/wrap/
$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );
then just simply work with css :)
然后只需简单地使用 css :)
In children div add to css
在儿童 div 添加到 css
.your_class {
direction: ltr;
}
And to parent div added by jQuery with class .scroll
和 jQuery 添加的父 div 类 .scroll
.scroll {
unicode-bidi:bidi-override;
direction: rtl;
overflow: scroll;
overflow-x: hidden!important;
}
Works prefect for me
非常适合我
回答by Dom Ramirez
Kind of an old question, but I thought I should throw in a method which wasn't widely available when this question was asked.
有点老问题，但我认为我应该提出一种在提出这个问题时并未广泛使用的方法。
You can reverse the side of the scrollbar in modern browsers using transform: scaleX(-1)on a parent <div>, then apply the same transform to reverse a child, "sleeve" element.
您可以在现代浏览器中使用transform: scaleX(-1)parent反转滚动条的一侧<div>，然后应用相同的变换来反转子“袖子”元素。
HTML
HTML
<div class="parent">
<div class="sleeve">
<!-- content -->
</div>
</div>
CSS
CSS
.parent {
overflow: auto;
transform: scaleX(-1); //Reflects the parent horizontally
}
.sleeve {
transform: scaleX(-1); //Flips the child back to normal
}
Note: You may need to use an -ms-transformor -webkit-transformprefix for browsers as old as IE 9. Check CanIUseand click "show all" to see older browser requirements.
注意：对于像 IE 9 一样旧的浏览器，您可能需要使用-ms-transform或-webkit-transform前缀。选中CanIUse并单击“全部显示”以查看旧浏览器要求。
回答by Artem Oliynyk
No, you can't change scrollbars placement without any additional issues.
不，您不能在没有任何其他问题的情况下更改滚动条的位置。
You can change text-direction to right-to-left ( rtl ), but it also change text position inside block.
您可以将文本方向更改为从右到左 ( rtl )，但它也会更改块内的文本位置。
This code can helps you, but I not sure it works in all browsers and OS.
此代码可以帮助您，但我不确定它是否适用于所有浏览器和操作系统。
<element style="direction: rtl; text-align: left;" />
回答by Li Kia Chiu
Here is what I have done to make the right scroll bar work. The only thing needed to be considered is when using 'direction: rtl' and whole table also need to be changed. Hopefully this gives you an idea how to do it.
这是我为使正确的滚动条工作所做的工作。唯一需要考虑的是使用“direction: rtl”时，整个表也需要更改。希望这能让你知道如何去做。
Example:
例子：
<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>
Check this: JSFiddle
检查这个：JSFiddle
