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

User · Answer

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

User · Answer

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

User · Answer

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    lt element style  direction  rtl  text-align  left     gt

User · Answer

Working Example  JSFiddle or Cut and paste solution that works for all major browsers  Even Safari  Any height or width will work  lt style gt     list container       direction  rtl      overflow auto      height  50px      width  50px          item direction       direction ltr       lt  style gt   lt div class  quot list container quot  gt     lt div class  quot item direction quot  gt 1 lt  div gt     lt div class  quot item direction quot  gt 2 lt  div gt     lt div class  quot item direction quot  gt 3 lt  div gt     lt div class  quot item direction quot  gt 4 lt  div gt     lt div class  quot item direction quot  gt 5 lt  div gt     lt div class  quot item direction quot  gt 6 lt  div gt     lt div class  quot item direction quot  gt 7 lt  div gt     lt div class  quot item direction quot  gt 8 lt  div gt     lt div class  quot item direction quot  gt 9 lt  div gt     lt div class  quot item direction quot  gt 10 lt  div gt     lt div class  quot item direction quot  gt 11 lt  div gt     lt div class  quot item direction quot  gt 12 lt  div gt   lt  div gt   Optionally add class  quot item direction to each item to change the direction of the text flow back  while preserving the container direction

User · Answer

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  lt div gt   then apply the same transform to reverse a child   sleeve  element   HTML   lt div class  parent  gt     lt div class  sleeve  gt       lt  -- content -- gt     lt  div gt   lt  div gt    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

User · Answer

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    lt div class  scroll  gt  lt  div gt        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

User · Answer

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    lt table dir  rtl  gt  lt tr gt  lt td gt Display Last lt  td gt  lt td gt Display Second lt  td gt  lt td gt Display First lt  td gt  lt  table gt    Check this  JSFiddle

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

Examples related to html

Examples related to css