How to position a div scrollbar on the left hand side? - html

Question

Is it possible to specify a position (left or right hand side) for the placement of a vertical scrollbar on a 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?

Answer 1

You could 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;
}
Untested.

Answer 2

.list_container {
direction: rtl;
overflow:auto;
height: 50px;
width: 50px;
}
.item_direction {
direction:ltr;
}
<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>
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 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_direction to each item to change the direction of the text flow back, while preserving the container direction.

Answer 3

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.
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 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.

Answer 4

I have the same problem. but when i add direction: rtl; in tabs and accordion combo but it crashes my structure.
The way to do it is add div with direction: rtl; as parent element, and for child div set direction: ltr;.
I use this first https://api.jquery.com/wrap/
$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );
then just simply work with css :)
In children div add to css
.your_class {
direction: ltr;
}
And to parent div added by jQuery with class .scroll
.scroll {
unicode-bidi:bidi-override;
direction: rtl;
overflow: scroll;
overflow-x: hidden!important;
}
Works prefect for me
http://jsfiddle.net/jw3jsz08/1/

Answer 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.
This code can helps you, but I not sure it works in all browsers and OS.
<element style="direction: rtl; text-align: left;" />

Answer 6

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.
Example:
<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>
Check this: JSFiddle

Answer 7

There is a dedicated npm package for it. css-scrollbar-side