Evite que la barra de desplazamiento se agregue al ancho de la página en Chrome

Tengo un pequeño problema al tratar de mantener mis páginas .html con un ancho constante en Chrome. Por ejemplo, tengo una página (1) con una gran cantidad de contenido que desborda la altura de la ventana gráfica (¿palabra correcta?), Por lo que hay una barra de desplazamiento vertical en esa página (1). En la página (2) tengo el mismo diseño (menús, divs, ... etc) pero menos contenido, por lo que no hay barras de desplazamiento verticales allí.

El problema es que en la página (1) las barras de desplazamiento parecen empujar los elementos ligeramente hacia la izquierda (¿se suman al ancho?) Mientras que todo aparece bien centrado en la página (2)

Todavía soy un principiante en HTML / CSS / JS, y estoy bastante convencido de que esto no es tan difícil, pero no tuve suerte para encontrar la solución. Funciona según lo previsto en IE10 y FireFox (barras de desplazamiento que no interfieren), solo encontré esto en Chrome.

Puede obtener el tamaño de la barra de desplazamiento y luego aplicar un margen al contenedor.

Algo como esto:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS para eliminar la barra de desplazamiento h:

body{
    overflow-x:hidden;
}

Intente echar un vistazo a esto: http://jsfiddle.net/NQAzt/

DESCARGO DE RESPONSABILIDAD : la superposición ha quedado obsoleta .
Aún puede usar esto si es absolutamente necesario, pero trate de no hacerlo.

Esto solo funciona en navegadores WebKit , pero me gusta mucho. Se comportará como autoen otros navegadores.

.yourContent{
   overflow-y: overlay;
}

¡Esto hará que la barra de desplazamiento aparezca solo como una superposición , por lo que no afectará el ancho de su elemento!

Todo lo que necesita hacer es agregar:

html {
    overflow-y: scroll;
}

En su archivo css, ya que este tendrá el desplazamiento, ya sea que sea necesario o no, aunque simplemente no podrá desplazarse

Esto significa que la ventana gráfica tendrá el mismo ancho para ambos

Probablemente

html {
    width: 100vw;
}

es justo lo que quieres.

Los navegadores Webkit como Safari y Chrome restan el ancho de la barra de desplazamiento del ancho de la página visible al calcular el ancho: 100% o 100vw. Más en Desplazamiento y ancho de página de DM Rutherford .

Intente usar en su overflow-y: overlaylugar.

Encontré que podía agregar

::-webkit-scrollbar { 
display: none; 
}

directamente a mi css y haría invisible la barra de desplazamiento, pero aún así me permitiría desplazarme (al menos en Chrome). ¡Bueno para cuando no quieres una barra de desplazamiento que te distraiga en tu página!

Para contenedores con un ancho fijo, se puede lograr una solución de navegador cruzado CSS puro envolviendo el contenedor en otro div y aplicando el mismo ancho a ambos divs.

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

Haga clic aquí para ver un ejemplo en Codepen

No parece que mi otra respuesta esté funcionando bien en este momento (pero seguiré intentando que funcione).

Pero básicamente lo que debe hacer, y lo que estaba tratando de hacer de forma dinámica, es establecer el ancho del contenido en un poco menos que el del panel principal desplazable.
Para que cuando aparezca la barra de desplazamiento no afecte al contenido.

Este EJEMPLO muestra una forma más intrincada de lograr ese objetivo, codificando widths en lugar de intentar que el navegador lo haga por nosotros a través de padding.
Si esto es factible, esta es la solución más simple si no desea una barra de desplazamiento permanente.

_{EDITAR: esta respuesta no es del todo correcta en este momento, consulte mi otra respuesta para ver lo que estaba intentando hacer aquí. Estoy tratando de arreglarlo, pero si puedes ofrecer ayuda, hazlo en los comentarios, ¡gracias!}

Utilizando padding-right mitigará la aparición repentina de una barra de desplazamiento

EJEMPLO

Como puede ver en los puntos, el texto llega al mismo punto en la página antes de ajustarse, independientemente de si hay una barra de desplazamiento o no.
Esto se debe a que cuando se introduce una barra de desplazamiento, el relleno se esconde detrás de ella, por lo que la barra de desplazamiento no empuja el texto.

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

donde 300 px es la mitad del ancho de mi ventana de diálogo.

En realidad, esto es lo único que funcionó para mí.

Tuve el mismo problema en Chrome. Solo me sucedió cuando la barra de desplazamiento siempre está visible. (que se encuentra en la configuración general) Tengo un modal y cuando abro el modal noté que ...

body {
    padding-left: 15px;
}

se agrega al cuerpo. Para evitar que esto suceda, agregué

body {
    padding-left: 0px !important;
}

No puedo agregar comentarios para la primera respuesta y ha pasado mucho tiempo ... pero esa demostración tiene un problema:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop ('scrollHeight') siempre es igual a b.height (),

Creo que debería ser así:

if(b.prop('scrollHeight')>window.innerHeight) ...

Por fin recomiendo un método:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}