How to change scroll bar position with CSS

Question

Is there any way to change position of scroll bar from left to right or from bottom to top with CSS

User · Answer

Try this out  Hope this helps   lt div id  single  dir  rtl  gt       lt div class  common  gt Single lt  div gt   lt  div gt    lt div id  both  dir  ltr  gt       lt div class  common  gt Both lt  div gt   lt  div gt      single   both      width  100px      height  100px      overflow  auto      margin  0 auto      border  1px solid gray       common      height  150px      width  150px

User · Answer

Using CSS only   Right Left Flippiing  Working Fiddle   Container       height  200px      overflow-x  auto     Content       height  300px      Flipped       direction  rtl     Content       direction  ltr      Top Bottom Flipping  Working Fiddle   Container       width  200px      overflow-y  auto     Content       width  300px      Flipped   Flipped  Content       transform rotateX 180deg       -ms-transform rotateX 180deg      IE 9        -webkit-transform rotateX 180deg      Safari and Chrome

User · Answer

Here is another way  by rotating element with the scrollbar for 180deg  wrapping it s content into another element  and rotating that wrapper for -180deg  Check the snippet below   x000D   x000D  div   x000D    display  inline-block  x000D    width  100px  x000D    height  100px  x000D    border  2px solid black  x000D    margin  15px  x000D    x000D   vertical   x000D    direction  rtl  x000D    overflow-y  scroll  x000D    overflow-x  hidden  x000D    background  gold  x000D    x000D   vertical p   x000D    direction  ltr  x000D    margin-bottom  0  x000D    x000D   horizontal   x000D    direction  rtl  x000D    transform  rotate 180deg   x000D    overflow-y  hidden  x000D    overflow-x  scroll  x000D    background  tomato  x000D    padding-top  30px  x000D    x000D   horizontal span   x000D    direction  ltr  x000D    display  inline-block  x000D    transform  rotate -180deg   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id vertical gt  x000D     lt p gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content x000D       lt br gt content lt  p gt  x000D   lt  div gt  x000D   lt div id horizontal gt  lt span gt  content content content content content content content content content content content content content content lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

[html] How to change scroll bar position with CSS?

The answer is

Examples related to html

Examples related to css

Examples related to scrollbar

Tags