Coloque las barras de desplazamiento verticales en el lado opuesto con CSS

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 central para muchos.

Pero es un truco de CSS fascinante y la web es un lugar grande con una magnitud incognoscible de situaciones en las que a veces se necesitan soluciones extrañas.

Técnica n.° 1: engaño direccional

El truco aquí es hacer que el elemento principal de desplazamiento se use direction: rtl(o lo opuesto a cualquiera que sea su dirección principal) y hacer que el interior del elemento de desplazamiento vuelva a cambiar a lo normal.

Técnica n.° 2: engaño rotacional

Jugar con la dirección del texto sin fines de dirección de texto siempre me da un poco de miedo, por lo que este truco parece menos complicado. El truco consiste en girar el padre 180degy luego el hijo hacia atrás 180degpara que vuelva a estar en posición vertical.

Debido a la primera rotación, la barra de desplazamiento termina en el lado opuesto.

Éste es especialmente incómodo por dos razones:

1. El elemento de desplazamiento se desplaza hacia abajo de forma predeterminada
2. La dirección de desplazamiento se siente invertida con una rueda de desplazamiento. La barra de desplazamiento en sí debería comportarse más o menos como se esperaba, pero un trackpad o una rueda de desplazamiento del mouse sentirán que la dirección de desplazamiento se ha invertido en ese elemento.

Más bien una broma del Día de los Inocentes que algo que realmente usarías. Un tweet viral lo llamó maldito , lo cual sí.