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

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.