En algunos casos tener scroll en nuestras páginas web puede resultar molesto para nuestros usuarios. O, al menos, eso dicen ciertos diseñadores. Si bien, a mí me parece un elemento muy útil. Pero veamos como podemos quitar el scroll de nuestra página web.
Si te encuentras en una situación en la que tengas que quitar el scroll puedes seguir una serie de pasos y apoyándonos en el lenguaje CSS. La idea consiste en jugar con la propiedad overflow. La propiedad overflow controla lo que sucede cuando un contenido desborda el área en la que se encuentra. Si lo aplicamos a nivel de toda la página, será cuando el contenido supere el tamaño de la ventana.
Los valores que puede tener la propiedad overflow serían:
- visible, el contenido que sobresale no se corta. Se renderiza fuera del área que tenía asignado. Este es el valor por defecto.
- hidden, el contenido que sobresale se corta y el resto del contenido se queda como invisible.The overflow is clipped, and the rest of the content will be invisible
- scroll, el contenido que sobresale se corta, pero se añade una scrollbar que nos permite llegar al resto del contenido.
- auto, si el contenido que sobresale se corta, se añade una scrollbar para ver el resto del contenido.content
- inherit, el valor será heredado del elemento padre.
En nuestro caso vamos a asignar el valor hidden. Es decir, cortaremos el contenido que sobresale. Consecuentemente, el navegador no necesitará poner una barra de scroll.
El código a utilizar sería el siguiente:
<style type="text/css">
html,body {
overflow:hidden;
}
</style>
