html - personalizar - Evita que un diseño centrado cambie su posición cuando aparece la barra de desplazamiento

ocultar scroll pero que funcione

Question

El diseño de mi página se ve algo como esto :

<style type="text/css">
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>

<div id="content-wrap">
</div>

Notará que la división de contenido cambia su posición un poco cuando aparece la barra de desplazamiento vertical. Un escenario es cuando el navegador comienza a mostrar la página progresivamente sin mostrar la barra de desplazamiento vertical, luego determina que se necesita una barra de desplazamiento porque el contenido es más alto que el "pliegue". Esto desplaza el div unos 10px hacia la izquierda.

¿Cuál es la mejor manera de abordar este problema sin forzar al navegador a mostrar siempre la barra de desplazamiento?

Answer 1

Si su sitio es "sensible" (reacciona al ancho):

Paso 1: Agregue el width: 100vw a una envoltura div. Esto lo hace tan ancho como la ventana gráfica, ignorando la apariencia de una barra de desplazamiento.

Paso 2: Agregue overflow-x: hidden al cuerpo. Esto eliminará la barra de desplazamiento horizontal (creada cuando aparece la barra de desplazamiento vertical, para permitir al usuario "mirar debajo").

"wrapper div" se refiere a otro div alrededor de tu #content-wrap

Trabajará para tu caso también, probado:

<style type="text/css">
body {
    overflow-x: hidden;
}
#wrap-wrap {
    width: 100vw;
}
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>
<div id="wrap-wrap">
    <div id="content-wrap">
    </div>
</div>

Asegúrese de que nada en su página sea lo suficientemente ancho para quedar atrapado debajo de la barra de desplazamiento.

Si su sitio es ancho fijo + centrado (su caso):

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Esto agregará un margen izquierdo igual en ancho a la barra de desplazamiento cuando aparezca. Que es 0 cuando no lo hace. Tomado de here , pero probado.

Answer 2

Debes usar:

html {
  overflow-y: overlay;
}

Sólo compatible con WebKit (Safari) o Blink (Chrome, Opera)

Answer 3

Me temo que la mejor manera de resolver esto es forzar la barra de desplazamiento para que sea visible en todo momento con html {overflow-y: scroll;} . El problema que tiene es que el "área disponible" se reduce con, por ejemplo, 10 px cuando aparece la barra de desplazamiento. Esto hace que el margen calculado en el lado izquierdo se reduzca con la mitad del ancho de la barra de desplazamiento, desplazando el contenido centrado un poco hacia la izquierda.

Una posible solución podría ser calcular el margen con JavaScript en lugar de usar el margin: 0 auto; y de alguna manera compense los píxeles "perdidos" cuando aparece la barra de desplazamiento, pero me temo que será desordenado y el contenido probablemente se moverá un poco de todos modos mientras calcula y aplica el nuevo margen.

Answer 4

Primero recomendaría optimizar el HTML para que no tarde mucho en cargar / renderizar. Si la carga / procesamiento es rápido, la barra de desplazamiento no aparecerá "demasiado tarde". ¿Qué es lo que tarda en cargar / renderizar? Verifique la pestaña de red en las herramientas de depuración de Chrome (F12). Hacer una auditoría en las herramientas de depuración de Chrome.

Hay varias cosas que podrían hacer que el documento " reflow ", y la barra de desplazamiento aparece a pesar de que el navegador podría haber conocido las medidas necesarias desde el principio. ¿Está utilizando tablas para el diseño? ¡No! Es posible que necesiten múltiples pases de renderización. ¿Tienes imágenes sin ancho / alto especificado? Luego, el documento deberá ser reenviado cuando se cargue cada imagen. Especifique <img ... style="width: ..px; height: ..px"> . ¿Es el CSS sano y eficiente ?

Si no puede bajar la velocidad de carga / representación, creo que lo mejor es no usar la barra de desplazamiento del navegador si javascript está habilitado. De esa manera, puede controlarlo y colocarlo en una posición absoluta para que no afecte el posicionamiento horizontal.

Deje que su deslizador comience con display: none . Supervise eventos preparados para dominar, así como eventos de carga de imágenes y eventos de cambio de tamaño de la ventana. Cuando se ha cargado la página, se han cargado las imágenes y cuando se cambia el tamaño de la ventana, simplemente ejecute la misma función cada vez. Determinaría si la barra de desplazamiento es necesaria y la mostrará o la ocultará.

Podría usar JQuery UI Slider por ejemplo y establecer su maxValue en $(document).height() - $(window).height() , controlar el evento de cambio del control deslizante y luego desplazar el cuerpo al valor del control deslizante y así sucesivamente .

Si javascript está deshabilitado, el repliegue será la barra de desplazamiento normal y no hay nada que puedas hacer con el ligero cambio horizontal en ese momento.

Pero realmente creo que el problema del cambio horizontal es demasiado pequeño para pasar el tiempo reparándolo con una barra de desplazamiento personalizada, y verifico que realmente funcione bien en todas las plataformas, etc. Primero haga las optimizaciones de HTML / CSS.

Answer 5

Si puede usar Javascript, puede establecer el ancho de la content-wrap al ancho interior de la ventana menos el ancho estándar de una barra de desplazamiento.

Sin embargo, se encontrará con algunos problemas.

• El usuario deberá tener Javascript habilitado.
• ¡No sabes cuál es el ancho de la barra de desplazamiento vertical, especialmente si la barra de desplazamiento no está allí! Así que tendrás que adivinar. 20px parece una buena suposición.
• Los diferentes navegadores tienen diferentes maneras de indicar que desea que el ancho interior de la ventana sea.

Entonces, si puedes vivir con todo eso, puedes hacer algo como esto (en pseudo código)

if window.innerWidth is defined :
   set the width of the div to window.innerWidth-20px
else if we''re running on Internet Explorer :
   set the width to document.documentElement.offsetWidth-20px
otherwise :
   we''re out of luck and we best leave the width as is.

Answer 6

Usa jquery y pon esto en el inicio de tu etiqueta:

<script type="text/javascript">
function checkheight(){
 if ($(document).height() > $(window).height()) {
 //that is if there is vertical scrollbar
 document.getElementById(''yourcenteredcontainer'').style.paddingLeft=''8px''; 
 //8px because the scrollbars are (?always?) 16px
 }else{
 document.getElementById(''yourcenteredcontainer'').style.paddingLeft=''0px'';
 }
}
</script>

y llamar a la función checkheight (); al final de su etiqueta y donde sea que tenga eventos de clics (u otros) que hagan que la página sea más larga o más corta.