How to place div scrollbar on left side?

Question

Is it possible to specify a position (left or right side) to place a vertical scrollbar on a div?

For example, check out this page that explains how to use the overflow attribute. Is there a way to place this scrollbar on the left side of the scrollable area?

Answer 1

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

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

Unverified.

Answer 2

I have the same problem. but when i add direction: rtl; in a combination of tabs and accordion, but it destroys my structure.

The way to do this: add a div with direction: rtl; as the parent, and for the child div, direction: ltr; .

I use this first https://api.jquery.com/wrap/

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

then just just work with css :)

In children div add to css

  .your_class { direction: ltr; } 

And for the parent div added by jQuery with the .scroll class

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

Prefect works for me

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

Answer 3

No, you cannot change the scroll layout without any additional problems.

You can change the direction of the text from right to left (rtl), but also change the position of the text inside the block.

This code may help you, but I'm not sure if it works in all browsers and OS.

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

Answer 4

Kind of an old question, but I thought I should give up a method that was not widely available when this question was asked.

You can flip the side of the scrollbar in modern browsers with transform: scaleX(-1) in the parent <div> , then apply the same transform to refer to the child of the sleeve.

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 } 

Note. You may need the -ms-transform or -webkit-transform prefix for browsers like the old IE 9. Check CanIUse and click "show all" to see the old browser requirements.

Answer 5

Here is what I did to make the right scroll bar. The only thing to consider is to use the "direction: rtl" and the whole table. Hope this gives you an idea of ​​how to do this.

Example:

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

Check this out: JSFiddle