Quitar el scroll de nuestra página web

25/May/2010 CSS 7 Comentarios
Ejemplos Programación CSS

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:

Vídeos sobre CSS


7 comentarios en “Quitar el scroll de nuestra página web”

Víctor Cuervo

Marta

Hola! Soy nueva en esto y ando un poco perdida. Si quiero desactivar la barra solo entre un ancho de página de 480 a 1920 px, cómo puedo hacerlo? Muchas gracias de antemano!

Víctor Cuervo

Ezequiel

Victor que tal buenas tardes, tengo una pagina web html interna en el trabajo que me la » enchufaron » porque entiendo algo minimo, no se donde colocar ese codigo, me podrias ayudar?

Muchas gracias!

Víctor Cuervo

Richard

Se pone dentro del head o cabecera

html,body {
overflow:hidden;
}

Víctor Cuervo

personita tonta

MUI SIERTO

Víctor Cuervo

Horacio

Quise escribir «aunque» no «qunque»

Víctor Cuervo

Horacio

Hola Victor. qunque este artículo es del 2010, me acaba de salvar un trabajo. Muchisimas gracias.
Horacio

Víctor Cuervo

Víctor Cuervo

Horario, pues nos encanta escuchar eso. Que algo escrito hace tanto tiempo siga siendo de utilidad. La verdad que agradecemos enormemente tu comentario.

Saludos.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*