Impedir que a barra de rolagem seja adicionada à largura da página no Chrome

Eu tenho um pequeno problema ao tentar manter minhas páginas .html em uma largura consistente no Chrome, por exemplo, eu tenho uma página (1) com muito conteúdo que ultrapassa a altura da janela de visualização (palavra certa?), Então há uma barra de rolagem vertical nessa página (1). Na página (2) eu tenho o mesmo layout (menus, divs, ... etc), mas menos conteúdo, portanto, não há barras de rolagem verticais.

O problema é que na página (1) as barras de rolagem parecem empurrar os elementos ligeiramente para a esquerda (somando-se à largura?) Enquanto tudo parece bem centralizado na página (2)

Ainda sou um iniciante em HTML / CSS / JS e estou bastante convencido de que isso não é tão difícil, mas não tive sorte em descobrir a solução. Funciona como esperado no IE10 e FireFox (barras de rolagem não interferentes), só encontrei isso no Chrome.

Você pode obter o tamanho da barra de rolagem e aplicar uma margem ao contêiner.

Algo assim:

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 remover a barra de rolagem h:

body{
    overflow-x:hidden;
}

Tente dar uma olhada nisso: http://jsfiddle.net/NQAzt/

AVISO LEGAL : a sobreposição foi descontinuada .
Você ainda pode usar isso se for absolutamente necessário, mas tente não fazer.

Isso só funciona em navegadores WebKit , mas gosto muito. Se comportará como autoem outros navegadores.

.yourContent{
   overflow-y: overlay;
}

Isso fará com que a barra de rolagem apareça apenas como uma sobreposição , não afetando a largura do seu elemento!

Tudo que você precisa fazer é adicionar:

html {
    overflow-y: scroll;
}

No seu arquivo css, pois este terá o rolador, seja necessário ou não, embora você simplesmente não consiga rolar

Isso significa que a janela de visualização terá a mesma largura para ambos

Provavelmente

html {
    width: 100vw;
}

é exatamente o que você deseja.

Navegadores Webkit como Safari e Chrome subtraem a largura da barra de rolagem da largura visível da página ao calcular a largura: 100% ou 100vw. Mais em Scrolling and Page Width de DM Rutherford .

Tente usar em seu overflow-y: overlaylugar.

Eu descobri que poderia adicionar

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

diretamente para o meu css e tornaria a barra de rolagem invisível, mas ainda me permitiria rolar (no Chrome, pelo menos). Bom para quando você não quer uma barra de rolagem perturbadora em sua página!

Para contêineres com largura fixa, uma solução cruzada de navegador CSS puro pode ser realizada envolvendo o contêiner em outro div e aplicando a mesma largura a ambos os 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;
}

Clique aqui para ver um exemplo no Codepen

Não parece que minha outra resposta esteja funcionando bem no momento (mas vou continuar tentando colocá-la em operação).

Mas basicamente o que você precisa fazer, e o que ele estava tentando fazer dinamicamente, é definir a largura do conteúdo para um pouco menos do que a do painel pai rolável.
Assim, quando a barra de rolagem aparecer, ela não terá efeito sobre o conteúdo.

Este EXEMPLO mostra uma maneira mais hacky de atingir esse objetivo, codificando widths em vez de tentar fazer com que o navegador faça isso por nós via padding.
Se isso for viável, esta é a solução mais simples se você não quiser uma barra de rolagem permanente.

_{EDITAR: esta resposta não está totalmente certa no momento, consulte minha outra resposta para ver o que eu estava tentando fazer aqui. Estou tentando consertar, mas se puderem ajudar nos comentários, obrigado!}

O uso padding-rightirá mitigar o aparecimento repentino de uma barra de rolagem

EXEMPLO

Como você pode ver pelos pontos, o texto vai para o mesmo ponto na página antes de quebrar, independentemente de haver ou não uma barra de rolagem.
Isso ocorre porque quando uma barra de rolagem é introduzida, o preenchimento fica oculto atrás dela, então a barra de rolagem não empurra o texto!

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

onde 300 px é a metade da largura da minha janela de diálogo.

Esta é realmente a única coisa que funcionou para mim.

Eu tive o mesmo problema no Chrome. Só aconteceu para mim quando a barra de rolagem está sempre visível. (encontrado nas configurações gerais) Eu tenho um modal e quando abro o modal percebi que ...

body {
    padding-left: 15px;
}

é adicionado ao corpo. Para impedir que isso aconteça, acrescentei

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

Não consigo adicionar comentários para a primeira resposta e já faz muito tempo ... mas essa demonstração tem um problema:

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

b.prop ('scrollHeight') sempre é igual a b.height (),

Acho que deveria ser assim:

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

Por fim, recomendo um método:

html {
 overflow-y: scroll;
}

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

:root body {
  position: absolute;
}

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