Implementación del ajuste en desplazamiento con solo tres líneas de CSS: Amit Merchant: un blog sobre PHP, JavaScript, etc.

Si no está bajo la roca y no ha usado Internet por un tiempo, probablemente se haya encontrado con uno de esos sitios web donde, cuando se desplaza hacia abajo, algunas partes aparecen automáticamente en la ventana de visualización.

Este comportamiento se denomina como "chasquido de desplazamiento". Tome el sitio web de Tesla, por ejemplo.

GIF de Tesla.com

Como puede ver, una sección de nuevos productos se ajusta automáticamente a la ventana gráfica con un pequeño movimiento de desplazamiento cuando me desplazo por tesla.com.

Resulta que es bastante fácil obtener este tipo de comportamientos de ajuste de desplazamiento enriquecidos usando solo CSS. De hecho, ¡usando solo tres líneas de CSS!

Así que veamos cómo podemos hacerlo.

Índice
  1. El esqueleto HTML
  2. El CSS mágico
  3. En acción
  4. Conclusión

El esqueleto HTML

Para implementar algo como lo que vimos en tesla.com, primero necesitaremos un contenedor y dentro de este contenedor podemos guardar a los niños. <div>s que actuarían como áreas de ajuste de desplazamiento.

Así que nuestro esqueleto HTML se vería así.

<div class="container">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

El CSS mágico

Ahora, para hacer que el complemento de desplazamiento funcione, primero debemos establecer dos propiedades CSS llamadas overflow-y y scroll-snap-type sobre container entonces.

.container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

Aquí establecemos el overflow-y para "hacer desfilar" ya que necesitamos el comportamiento de ajuste de desplazamiento vertical.

los scroll-snap-type La propiedad CSS define qué tan estrictamente se aplican los puntos de ajuste en el contenedor de desplazamiento, si hay uno.

Aquí mismo, y indica que el contenedor de desplazamiento se ajusta a las posiciones de ajuste en su eje vertical solamente y mandatory determina que la ventana gráfica de este contenedor de desplazamiento descansará en un punto de ajuste, se ajusta a ese punto cuando se completa la acción de desplazamiento, si es posible.

A continuación, debemos configurar el scroll-snap-align css propiedad a "centrar" para el contenedor a los niños les gusta.

.container div {
    scroll-snap-align: center;
}

los scroll-snap-align propiedad asegura que la caja (aquí los niños <div>s) posición de ajuste como alineación de su área de ajuste en el puerto de ajuste de su contenedor de ajuste (como contenedor de alineación). ponlo a center alineará el área de ajuste de desplazamiento del cuadro con el centro del puerto de ajuste del contenedor de desplazamiento en el eje Y en nuestro caso.

¡Y es todo! Eso es todo lo que necesita para implementar un comportamiento de ajuste de desplazamiento que funcione.

Además, lo mejor de esto es que todas las propiedades que mencioné aquí son ampliamente compatibles con todos los navegadores compatibles. Así que también puedes usarlos en producción.

En acción

Si lo ponemos todo junto con un poco de CSS adicional, así es como se vería.

Vea Pen Scroll Snap con CSS de Amit Merchant (@amit_merchant) en CodePen.

¡Intente desplazarse por la página y verá el comportamiento de ajuste de desplazamiento en acción!

Conclusión

¡Y así es como puede implementar la captura de desplazamiento para su sitio web utilizando la menor cantidad de CSS posible y sin JavaScript!

Entonces, si desea implementar el comportamiento horizontalmente, simplemente puede anular el x con y en los valores de propiedad que mencioné anteriormente y tendrá un comportamiento de ajuste de desplazamiento horizontal a su disposición en poco tiempo.

Si quieres conocer otros artículos parecidos a Implementación del ajuste en desplazamiento con solo tres líneas de CSS: Amit Merchant: un blog sobre PHP, JavaScript, etc. puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas