más que HTML desarrollo web con estándares

Mostrar siempre las barras de desplazamiento

Publicado el 13 de diciembre de 2009 en: CSS

CSS

Si nos encontramos ante una web centrada horizontalmente, y pasamos de una página sin scroll vertical a otra que sí lo tiene (o viceversa), se produce un pequeño salto en la alineación. Al aparecer la barra de desplazamiento, el área de visualización del navegador se reduce y, por tanto, el centro se desplaza unos píxeles, lo que provoca ese salto en la alineación de la web.

Ocurre en todos los navegadores actuales, a excepción de Internet Explorer 6 y 7 que siempre muestran la barra de desplazamiento (cuando no hay scroll, aparece inactiva). Este comportamiento es que el podemos recrear en el resto de navegadores para evitar esos pequeños saltos. De la siguiente manera:

body { overflow-y: scroll; }

Comprobado en Internet Explorer 8, Opera 10.10, Safari 4.0.4, Google Chrome 3.0 y Firefox 3.5.5

Además, aunque la propiedad overflow-y no es válida para CSS 2.1, sí lo es para CSS 3.

Comentarios

Comentarios (3)

  1. zeuder dice:

    También me molesta ese salto, no se me había ocurrido aplicar esa propiedad de CSS3, gracias :)

  2. Antonio dice:

    Me parecía muy interesante esta solución, pero el problema es que en IE7 aparecen dos barras de desplazamiento, una junto a la otra, y aunque algún día IE7 desaparecerá, a día de hoy es ampliamente utilizado…

  3. más que HTML dice:

    Internet Explorer 6 y 7 por defecto siempre muestran la barra de desplazamiento vertical, así que para esos navegadores no es necesario declarar la propiedad overflow-y.

    Se pueden diferenciar esos navegadores del resto mediante comentarios condicionales