如何在左手边放置一个div滚动条?

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?

例如，查看这个页面，它解释了如何使用overflow属性。是否有办法将滚动条放在可滚动区域的左手边?

6 个解决方案

#1

Working Example: JSFiddle

or

或

Cut and paste solution that works for all major browsers (Even 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 id="item_direction">1</div>
  <div id="item_direction">2</div>
  <div id="item_direction">3</div>
  <div id="item_direction">4</div>
  <div id="item_direction">5</div>
  <div id="item_direction">6</div>
  <div id="item_direction">7</div>
  <div id="item_direction">8</div>
  <div id="item_direction">9</div>
  <div id="item_direction">10</div>
  <div id="item_direction">11</div>
  <div id="item_direction">12</div>
</div>

Optionally add id="item_direction to each item to change the direction of the text flow back, while preserving the container direction.

可选地向每个条目添加id=“item_direction”，以更改文本流的方向，同时保留容器方向。

#2

You could try direction:rtl; in your css. Then reset the text direction in the inner div

你可以试试方向:rtl;在你的css。然后在内部div中重置文本方向

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

#scroll div{
    direction:ltr;
}

Untested.

未测试。

#3

I have the same problem. but when i add direction: rtl; in tabs and accordion combo but it crashes my structure.

我也有同样的问题。但是当我添加方向:rtl;在标签和手风琴组合，但它崩溃了我的结构。

The way to do it is add div with direction: rtl; as parent element, and for child div set direction: ltr;.

方法是添加方向为:rtl的div;作为父元素，用于子div设置方向: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和class .scroll。

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

Works prefect for me

作品完美对我来说

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

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

#4

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)反向滚动条，然后应用相同的转换反向子元素“袖子”。

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-transform or -webkit-transform prefix for browsers as old as IE 9. Check CanIUse and click "show all" to see older browser requirements.

注意:对于IE 9这样的老浏览器，您可能需要使用-ms-transform或-webkit-transform前缀。检查CanIUse并单击“显示所有”以查看旧的浏览器需求。

#5

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;" />

#6

Here is what I have done to make the right scroll bar works. The only thing need to be consider is when using 'direction: rtl' and whole table also need to be change. Hopefully this give you 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