How to change scroll bar position with CSS?

by

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 */
}

More Related Contents:

  1. Add a horizontal scrollbar to an HTML table
  2. Why does vw include the scrollbar as part of the viewport?
  3. How can I prevent the scrollbar overlaying content in IE10?
  4. Hide html horizontal but not vertical scrollbar
  5. Prevent scroll-bar from adding-up to the Width of page on Chrome
  6. How can I increase a scrollbar’s width using CSS?
  7. Apply Border-Radius To Scrollbars with CSS
  8. Transparent scrollbar with css
  9. with fixed and scrollable [duplicate]
  10. How to get horizontal scroll bar in select box in IE?
  11. How can I create equal width/height boxes that fit the screen width? [duplicate]
  12. Scrollbar without fixed height/Dynamic height with scrollbar
  13. HTML canvas with scrollbar
  14. Bootstrap 4 Carousel “Half of previous”
  15. How can I vertically align elements in a div?
  16. Image inside div has extra space below the image
  17. Why doesn’t the height of a container element increase if it contains floated elements?
  18. How do I make a placeholder for a ‘select’ box?
  19. Equal width flex items even after they wrap
  20. How can I scale an entire web page with CSS?
  21. Place text after dots inline with the second line of text overflow ellipsis
  22. Absolute position is not working
  23. using text-align center in colgroup
  24. 100% width minus margin and padding [duplicate]
  25. display:inline with margin, padding, width, height
  26. How to get rid of extra space below svg in div element
  27. How to align footer (div) to the bottom of the page? [duplicate]
  28. Align a div to center
  29. Make Bootstrap’s Carousel both center AND responsive?
  30. Alignment of content vertically in adjacent flexbox containers

Leave a Comment