如何在左侧放置div滚动条？

Question

是否可以指定垂直滚动条在div上的位置（左侧或右侧）？

例如查看this page，它解释了如何使用溢出属性。有什么方法将滚动条放置在可滚动区域的左侧？

Answer 1

不，您无法更改滚动条的位置，而无任何其他问题。

您可以将文本方向更改为从右到左（rtl），但它也会更改块内的文本位置。

此代码可以帮助您，但我不确定它适用于所有浏览器和操作系统。

<element style="direction: rtl; text-align: left;" /> 

Answer 2

您可以在您的CSS中尝试direction:rtl;。然后在内部重置文本方向div

#scroll{ 
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;} 

#scroll div{ 
    direction:ltr; 
} 

未经测试。

Answer 3

我有同样的问题。但是当我在标签和手风琴组合中添加direction: rtl;时，它会崩溃我的结构。

要做到这一点的方法是将div加direction: rtl;作为父元素，对于子div集direction: ltr;。

我用这首https://api.jquery.com/wrap/

$(".your selector of child element").wrap("<div class='scroll'></div>"); 

然后只是简单的用CSS :)

在孩子DIV添加到CSS

.your_class { 
      direction: ltr;  
     } 

以及由jQuery的添加类父DIV工作.scroll

.scroll { 
      unicode-bidi:bidi-override; 
      direction: rtl; 
      overflow: scroll; 
      overflow-x: hidden!important; 
     } 

个

工程知府我

http://jsfiddle.net/jw3jsz08/1/

Answer 4

这里是我做了什么做出正确的滚动条的作品。唯一需要考虑的是使用'方向：rtl'时，整个表也需要改变。希望这可以让你知道如何去做。

例子：

<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table> 

检查：JSFiddle

Answer 5

一个老问题的种类，但我想我应该在这个时候有人问这是不是广泛使用的方法抛出。

您可以在现代浏览器中使用transform: scaleX(-1)在父代<div>上反转滚动条的一侧，然后应用相同的转换来反转子“袖”元素。

HTML

<div class="parent"> 
    <div class="sleeve"> 
    <!-- content --> 
    </div> 
</div> 

CSS

.parent { 
    overflow: auto; 
    transform: scaleX(-1); //Reflects the parent horizontally 
} 

.sleeve { 
    transform: scaleX(-1); //Flips the child back to normal 
} 

注意：您可能需要使用-ms-transform或-webkit-transform前缀的浏览器一样古老的IE 9.检查CanIUse，然后单击 “显示所有” 看旧的浏览器要求。