de webmaster a webmaster

Forzar la aparición de las barras de scroll con CSS

con 4 comentarios, ¡esto se mueve!

En alguna ocasión te encontrás el siguiente escenario donde en determinados proyectos existe una clara molestia visual producida por los constantes salto en la maquetación del contenido que se desplaza unos 20 píxeles hacia tu izquierda al navegar entre una página y otra.

Este salto es normalmente producido por la existencia o no existencia de la barra de desplazamiento vertical o barra de scroll, una barra que quieras o no ocupa su espacio en el universo y como dice un tal arquímedes con su teoría sobre los líquidos esta barra desplaza el contenido tantos píxeles como volumen tiene la misma.

Aunque si bien este es un comportamiento natural, predecible y argumentable hacia tus clientes, el efecto que produce ese desplazamiento de contenidos es del todo indeseado y más aún cuando suele suceder desde la propia página de inicio o home donde muchos maniáticos de la comunicación, entre los que me incluyo, quieren poco texto poco espacio para evitar un exceso de información e invitar al cliente a profundizar, en páginas con más contenido y por tanto con la dichosita barra de scroll.

Pues bien, hemos acudido al dios salvador, que no es otro que el CSS y tachán la solución en tres líneas, y tan fácil como forzar la aparición de las barras sí o sí.

El código CSS:

html {
/* forzado de scrollbars */
min-height: 100%;
margin-bottom: 1px;
}

Be Sociable, Share!

Escrito por un tal uvedobles.com

February 27th, 2010 a las 10:33 am

4 respuesta to 'Forzar la aparición de las barras de scroll con CSS'

Subscríbete a estos comentarios via RSS or TrackBack a 'Forzar la aparición de las barras de scroll con CSS'.

  1. 🙁 No funciona !

    Krla

    25 May 10 at 02:24

  2. Hola Krla, please proporciona más datos para que te podamos ayudar, con un “No funciona” no nos vale, por mi parte lo he vuelto a probar bajo Chrome y Firefox y funciona a la perfección, así que si nos cuentas bajo que navegador y versión del mismo estás funcionando intentamos reproducir tu error.

    Por cierto, si cuelgas tu “No funciona” en un servidor, genial, así lo puedo ver en su propia salsa y te lo puedo corregir.

    Espero tu respuesta!

    dedavid

    25 May 10 at 07:14

  3. ESTO SÍ

    html {
    height: 100%;
    padding-bottom: 1px; /*Hack que evita que barra de desplazamiento arriba-abajo vaya y venga cuando la pagina es pequeña*/
    }

    Un saludo

    mikel

    25 Sep 10 at 16:40

  4. Perdon, no habia leido tu comentario. A mi tampoco me ha funcionado en firefox (mac). Supongo que interfería con alguna otra regla css en la hoja, asi que no he perdido tiempo en buscar que era sino que he usado ese otro hack que lo tenia por ahi.
    Un saludo

    mikel

    25 Sep 10 at 18:24

Deja aquí tu comentario, tu huella, o mejor ingrésame unos euros