如何定位一个 div 滚动条在左手边？

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

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.

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/

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

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.

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

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