Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=57befa8f-e502-482c-a28c-f8e5bf9b8733

Cómo suavizar scrolls automáticos solo con CSS y scroll-behavior

Scroll suave con scroll-behavior y CSS

Los enlaces internos dentro de un mismo documento HTML son una solución muy práctica y habitual, especialmente en páginas de preguntas frecuentes o ecommerce monoproducto.

Son muy cómodos porque te permiten acceder de forma muy rápida y fácil a diferentes secciones cuyo contenido quizá no es suficiente para disponer de su propia página.

Además, en este tipo de estructuras de contenido también es habitual encontrar un botón flotante con la típica flechita para volver hacia arriba, la cual funciona con el mismo sistema: un enlace interno que apunta al id de un elemento de la misma página.

El problema es que el salto por defecto entre diferentes secciones suele ser bastante brusco, lo que puede hacer que la experiencia de usuario se vea afectada, especialmente en páginas grandes con bastante scroll. Es decir, el usuario no sabe muy bien a qué altura de la página está. Y para qué negarlo, esa transición no es ni agradable ni bonita, que todo suma.

Un ejemplo del comportamiento por defecto:

Para solucionarlo, tradicionalmente tirábamos de librerías de JavaScript, ya fuesen específicas o con jQuery, pero hoy en día disponemos de una propiedad específica de CSS: scroll-behavior: smooth; y el navegador se ocupará de todo.

html {
        scroll-behavior: smooth;
       /*Comenta la línea (o dale el valor 'auto' a scroll behavior )
       para probar la diferencia con y sin scroll suavizado*/
    }

Obviamente no tendremos parámetros para personalizar la velocidad de la transición, pero la transición por defecto es suficientemente útil para el 99% de los casos, en mi humilde opinión. Se vería algo así.

La propiedad scroll-behavior: soporte, compatibilidad y usos

Hay algunas cosillas que debes tener en cuenta. Por defecto no se hereda y se la tendrás que aplicar al elemento contenedor que tendrá el scroll. En el caso del viewport del navegador, deberás aplicárselo al elemento raíz, ya sea a través del elemento html o del pseudo-elemento :root.

El soporte en navegadores es bastante bueno y se puede usar en la mayoría de los más populares, exceptuando Safari (al menos en el momento de escribir este artículo).

Ejemplo práctico con scroll-behavior: slider vertical solo con CSS

¿Te acuerdas de este slider que hicimos solo con CSS anteriormente en este blog?

Pues con un par de retoques podemos hacer que la transición sea en vertical. Básicamente, lo que he hecho es que, los elementos <li> que antes los posicionaba de manera absoluta para poder apilarlos y mostrarlos y ocultarlo usando la opacidad, ahora los apilo como elementos de bloque (display:block) para mostrarlos en función del scroll.

Yo lo he hecho con una lista, pero esto se puede hacer con div, span, article, section... Vamos, con lo que semánticamente te venga mejor. Y te puede servir tanto para una presentación insertada dentro de una página como para organizar todo el contenido:

 

Los dos ejemplos de este post te los puedes descargar aquí para probarlos en tu propio equipo.

Y como guinda del pastel, también le podríamos aplicar las propiedades del CSS Scroll Snap module que hace poco nos explicó en este mismo blog José Manuel Alarcón, nuestro profe especialista en Front-End y creador de nuestro curso de HTML5 y CSS3 (y coautor del curso de Maquetación Responsive, entre muchos otros), así podremos mejorar también la experiencia durante el scroll normal del usuario.

Pero esta parte ya te la dejo a ti, que tampoco te lo voy a dar todo hecho, ¿no?. ¯\_(ツ)_/¯ 

Espero que te haya resultado útil, y si te queda alguna duda, tienes los comentarios a tu disposición para plantearla.

Pablo Iglesias Pablo Iglesias es diseñador en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Comentarios (2) -

Hola.

Llegue a este Blog esperando encontrar una solución a un problemita que se me presenta al utilizar el smooth scroll (El que se incorpora con Js) y es que la barra de menú de mi pagina web. Tienen una sección llamada servicios, este es un menu desplegable, pero aunque estan bien direccionadas los "href"  cuando le doy click a alguno de mis servicios me lleva al inicio y no al servicio indicado.  Ya trate con el codigo de CSS pero mi host o no se que me bloquea ese atributo, por eso tube que recurrir a la opción del .js

Este problema se entiende mejor si van a mi pag y enseguida entrar se van a contactanos por medio del menú y despues de eso si seleccionan cualquiera de los servicios.

Espero me puedan ayudar, les agradeceria un monton:

vicart-producers-designers.000webhostapp.com/WebVicArt.html

Responder

Pablo Iglesias
Pablo Iglesias

Hola Camilo:

Tiene toda la pinta de que hay algún conflicto en el manejo de los eventos del script que estás usando, pero yo en este caso descartaría directamente JavaScript e intentaría hacerlo simplemente con CSS aplicando scroll-behavior: smooth; al elemento HTML de la página.

No obstante, si quieres aprender a manejar bien los eventos y otros fundamentos importantes de JavaScript, permíteme que te recomiende este curso que es perfecto para cualquiera que quiera iniciarse en ello: www.campusmvp.es/.../...vaScript-y-jQuery_207.aspx

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.