soy Kseso y esto EsCSS

Rueda la rueda del ratón ¿hacia dónde va el scroll?

Cómo convertir con puro Css el giro de la rueda del ratón en desplazamiento horizontal de la página.

Rueda la rueda del ratón ¿hacia dónde va el scroll?

·Por Kseso ✎ 8

On mouse wheel down ... scroll right. Pure Css

If mouse wheel down ... scroll right. Pure Css

Hace unas fechas y en el artículo Distribución de bloques en 1 sola fila y navegación horizontal sin anchura declarada un lector del blog (Jaime Pascual) planteaba la cuestión del funcionamiento del scroll.

Resumiendo: si la página está diseñada con un scroll Y (navegación en horizontal) esperaba que el giro de la rueda del ratón se tradujese en un movimiento de la página también en horizontal.

Cuestión que por depender de las características del hardware y su programación (controlador) normalmente se encomienda a javascript ya que Css no puede acceder a ello.

Sin embargo, como tantas veces se ha repetido en este blog, hay cosas que Css no puede hacer pero sí simular que las hace. Y esta es una más de ellas.

Todo se reduce a invertir la página para que lo que ves como un movimiento en el eje X realmente sea un desplazamiento en la vertical (eje Y).

Pero antes de seguir, echa un vistazo a la demo sigueinte. Posiciona el cursor sobre él y haz uso de la rueda de tu ratón.

See the Pen If mouse wheel down ... scroll right by Kseso (@Kseso) on CodePen.

Ver demo a full

Antes de seguir, un par de apuntes:

  1. El efecto del scroll está realizado en base a al pen de @Hornebom "Head Over Heels". Yo me he limitado a corregir algunas cosillas, como que funcione igual en múltiples navegadores y no sólo Chrome.
  2. El cómo forzar el scroll X sin declarar medidas explicado en este artículo del blog.

Regla nº 1: El contenido lo primero

<div class="horizontal-parent"> <div class="horizontal-child"> <div class="slide"> <!--contenido-->

Me queda pendiente darle otra vuelta y ver si es posible simplificar elementos. Quizás lo sea.

Regla nº 2: ¿imposible con Css? ¡imaginación!

Ya sabes que hay una máxima que dice:

Donde no alcanza Css se llega con imaginación.

Como te comentaba al inicio, todo es cuestión, como en otras demos, de aplicar una transformación y compensarla en un elemento posterior.

En primer lugar preparamos el terreno de juego con la caja padre de todos los contenidos. El porqué de los valores negativos, tanto en las propiedades de colocación como en los tamaños de ésta y las siguientes, después.

.horizontal-parent { position: absolute; top: -1rem; left: 0; width: 100vw; height: 100vh; }

Ese va a ser el lienzo en blanco: una caja que ocupa todo el viewport. A continuación vamos a girar las dos cajas contenidas en la anterior:

.horizontal-child { position: relative; display: block; width: 100vh; height: 100vw; overflow: scroll; transform-origin: 100% 0%; transform: rotate(-90deg) translateY(-100vh); }

Con esta transformación lo que logramos es que el lado superior de la caja ahora sea el derecho de la pantalla y el lateral derechero pase a identificarse con el inferior del viewport.

Así que el scroll que veríamos sería el contrario. Pero también su contenido se mostraría girado esos 90º en sentido horario. Molesto y nada usable. Así que se compensa en su caja hija:

.horizontal-child .slide { width: 100vw; height: calc(100vh - 2rem); padding: 3rem 1rem 2rem; column-width: 350px; font-size: 1.3rem; transform-origin: 0% 0%; transform: rotate(90deg) translateY(-100%); }

Además del giro verás que hay una segunda transformación, translateY(). Esto es debido a que el giro, por el punto sobre el que se hace transform-origin, lleva aparejado un movimiento lateral que hay que compensar para que los contenidos se muestren a la izquierda y arriba del viewport.

Problemillas arreglados

Las pequeñas diferencias y pequeños fallos corregidos respecto al pen base original del que esta demo es deudora son:

  • No oculto la barra de scroll que se muestra pese al overflow con el uso de selectores privativos (pseudoelementos) del scroll del tipo ::-webkit-scrollbar-*. Así no es necesario el aviso de Ver en Chrome
  • Para ello recurro a los valores negativos que mencionaba antes tanto en la propiedad top del primer elemento como en height de .slide a la vez que corrijo cierto movimiento vertical del contenido, pequeño pero molesto.
  • Al usar la técnica de multicolumnas Css para forzar la navegación horizontal, frente a múltiples elementos para alojar el contenido, no es necesario calcular exprofeso y declarar las transformaciones, distintas, a cada una de ellas.

La segunda variación, tal como en el artículo de la navegación horizontal, usando en vez de un largo texto múltiples article´s para generar las columnas:

See the Pen If mouse wheel down ... scroll right II by Kseso (@Kseso) on CodePen.

Notas finales

El efecto también se produce si utilizas el teclado para navegar, tanto las flechas de "arriba / abajo" o las teclas "inicio / Fin / avanzar o retroceder páagina" además de "convertir" el giro de la rueda del ratón.

El efecto es funcional tanto en Chrome como en Firefox e Internet Explorer 11.

Sin embargo hay un pequeño contratiempo. Si se utiliza desplazamiento por gestos (pantallas táctiles), en Chrome y FIrefox el arrastre horizontal no surte ningún efecto. Hay que desplazar el dedo en la vertical para lograr un movimiento horizontal.

Sin embargo Internet Explorer 11 sí mantiene el efecto al usar gestos. El arrastre en X desplaza los contenidos. En esto nos salió listo el jodío.

avatar del Editor del blog
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso