Saltar al contenido

Desplazamiento suave CSS

Arreglando "0" en su código JSX

Mejorar la usabilidad de las aplicaciones web siempre ha sido una de mis prioridades. Sigo volviendo a lo mismo a pesar de que he tenido durante 20 años: «Usuario: suponer una aplicación web que funciona: hagamos que sea un placer desplazarse por la aplicación; una gran mejora de UX pero molesta cuando no es perfecta, ¿sabías que solo puedes implementar un desplazamiento suave usando CSS?

La scroll-behavior La propiedad CSS controla la estrategia de desplazamiento para los elementos de desbordamiento con comportamiento de desplazamiento y solo cuando se activa mediante la navegación o las propiedades de CSSOM. El estandar scroll-behavior vale la pena autoeso no es un efecto visual: desplazamiento instantáneo al elemento de destino sin animación. Para permitir que los usuarios se desplacen sin problemas, puede utilizar el smooth Valor:

/* slide between items */
.slideshow ul {
  scroll-behavior: smooth;
}

Por supuesto, si usa una API de navegador nativa, pierde algo de control visual, especialmente la velocidad y la curva de la animación. En el lado positivo, no tiene que agregar kilobytes de JavaScript, que debe mantener para obtener un efecto muy similar.

  • Transformaciones atractivas de enlaces con CSS
  • Evento posterior a la secuencia de comandos

Source link