A menudo encontramos sitios web donde hay secciones en las que se puede hacer scroll dentro de una misma sección sin desplazar el resto de la página hacia arriba o hacia abajo. Sin embargo, cuando el scroll se termina dentro de esta sección, la configuración hace que el usuario se desplace con el scroll a través del resto de la página y, en muchas ocasiones, perdiendo el foco sobre los elementos que interesan.
En el siguiente vídeo, Sergio Jiménez, nuestro profesor del bootcamp, nos muestra cómo se puede solventar el avance del scroll sobre la página cuando se ha terminado el de una sección con una propiedad de CSS llamada overscroll-behavior.
Aceptar el consentimiento para ver esto
En primer lugar, Sergio nos enseña como añadir scroll a la sección div que había creado con unos párrafos en el archivo HTML. Esto lo hace mediante la propiedad overflow-y, dándole el valor scroll. Lo hace sobre el eje y para que el scroll sea vertical, es decir, se aplique para desplazar el texto hacia arriba y hacia abajo.
A esto, hay que añadirle la propiedad overscroll-behavior-y con el valor contain para que no se siga haciendo scroll hacia arriba o hacia abajo si el usuario está con el cursor dentro de la sección div.
De esta forma, la sección div en CSS quedaría como en el siguiente código:
section div {
overflow-y: scroll;
overscroll-behavior-y: contain;
}
Esto puede ser de gran ayuda cuando hay un chat dentro de la web y se quiere evitar que el usuario haga scroll en la página cuando tiene el cursor sobre el chat, de forma que el scroll se lleve a cabo en el mismo chat sin afectar al de la página.
Por otro lado, Sergio nos muestra que la propiedad overscroll-behavior se puede utilizar también con el objetivo de bloquear la opción de refrescar la página con scroll en dispositivos móviles.
En la mayoría de los casos, si el usuario está en la zona superior de la página, puede refrescar la página haciendo scroll hacia arriba. No obstante, esto se puede evitar añadiendo la propiedad overscroll-behavior-y a la etiqueta html en el archivo CSS. A esta propiedad se le dará el valor none, por lo que quedaría:
html {
overscroll-behavior-y: none;
}
Para aprender más sobre CSS y otras tecnologías relacionadas con el desarrollo web, apúntate a nuestro Bootcamp Full Stack Web Developer y conviértete en experto. Todo lo que necesitas saber para trabajar en el campo de la programación.
