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.
Could this have a legit use case for cultures that don’t read left to right?
Right-to-left languages DO display the scrollbar on the left, which is how the first trick is implemented (with left-to-right content inside of a right-to-left scrollable container). But, generally speaking, there’s no need for a trick in those cases; you just set the
directiontortlto accommodate the language switch and the scrollbar, assuming you’re using native scrollbars, will switch over accordingly.You could rotate about the Y-axis instead of the (implicit) Z-axis to achieve what image-editing software might call “flip horizontal”, thus leaving the vertical direction intact.
Just add scale(1, -1) to both of the transforms to fix the backwards scrolling issue. Works in mobile Safari anyway.
This seem like a terrible idea, but if you ever needed to do this I guess it would be OK? Maybe? This one of those “I can’t think of a real reason to object but it just feels wrong” things.
We need to specify Y-axis to get the technique #2 the right way.