Position Vertical Scrollbars on Opposite Side with CSS
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:
- The scrolling element is scrolled to the bottom by default
- 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.
The post Position Vertical Scrollbars on Opposite Side with CSS appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
