Advertencia justa: no puedo decir que recomiendo esto en general porque rompe una expectativa muy fuerte de dónde están las barras de desplazamiento, que son útiles para mucha gente, sin mencionar, una característica de accesibilidad básica para muchos.
Pero es un truco fascinante de CSS y la web es un gran lugar con una magnitud desconocida de situaciones en las que a veces se necesitan soluciones extrañas.
Técnica # 1: truco direccional
El truco aquí es hacer que el elemento de desplazamiento principal use direction: rtl (o lo contrario de lo que sea su dirección principal), y haga que el interior del elemento de desplazamiento vuelva a lo que sea normal.
Técnica # 2: truco rotacional
Jugar con la dirección del texto para fines que no son de dirección del texto siempre me da un poco de miedo, por lo que este truco se siente menos hacky. El truco es rotar al padre 180deg, y luego el niño regresa otro 180deg así que está de pie otra vez.
Debido a la primera rotación, la barra de desplazamiento termina en el lado opuesto.
Este es especialmente incómodo por dos razones:
- El elemento de desplazamiento se desplaza hacia abajo de forma predeterminada
- La dirección de desplazamiento se siente invertida con una rueda de desplazamiento. La barra de desplazamiento en sí misma debería comportarse de la manera esperada, pero un trackpad o una rueda de desplazamiento del mouse parecerá que la dirección de desplazamiento se ha invertido en ese elemento.
Más como una broma de los Inocentes que algo que realmente usarías. Un tweet viral lo llamó malditoque, si.
Fuente: https://css-tricks.com/position-vertical-scrollbars-on-opposite-side-with-css/
