Position Vertical Scrollbars on Opposite Side with CSS

Programming - Mar 31, 2024

Fair warning: I can’t say I recommend this in general because it breaks a very strong expectation of where scrollbars are, which are useful for a lots of folks, not to mention, a core accessibility feature for many.

But it is a fascinating CSS trick and the web is a big place with an unknowable magnitude of situations where sometimes weird solutions are needed.

Technique #1: Directional Trickery

The trick here is to have the scrolling parent element use direction: rtl (or the opposite of whatever your primary direction is), and have the inside of the scrolling element switch back to whatever your normal is.

Technique #2: Rotational Trickery

Messing with text direction for non text-direction purposes always feels a little scary to me, so this trick feels less hacky. The trick is to rotate the parent 180deg, and then the child back another 180deg so it’s upright again.

Because of the first rotation, the scrollbar ends up on the opposite side.

This one is especially awkward for two reasons:

  1. The scrolling element is scrolled to the bottom by default
  2. The scroll direction feels reversed with a scroll wheel. The scrollbar itself should behave somewhat as expected, but a trackpad or mouse scrollwheel will feel like the scroll direction has been reversed in that element.

More like an April Fool’s joke than something you’d really use. A viral tweet called it cursed, which, yes.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More