Impedisci alla barra di scorrimento di aggiungersi alla larghezza della pagina su Chrome

Ho un piccolo problema cercando di mantenere le mie pagine .html a una larghezza costante su Chrome, ad esempio ho una pagina (1) con molti contenuti che supera l'altezza del viewport (parola giusta?), Quindi c'è una barra di scorrimento verticale in quella pagina (1). A pagina (2) ho lo stesso layout (menu, div, ... ecc.) Ma meno contenuto, quindi nessuna barra di scorrimento verticale.

Il problema è che a pagina (1) le barre di scorrimento sembrano spingere gli elementi leggermente a sinistra (sommando la larghezza?) Mentre tutto appare ben centrato sulla pagina (2)

Sono ancora un principiante su HTML / CSS / JS e sono abbastanza convinto che non sia così difficile, ma non ho avuto fortuna a trovare la soluzione. Funziona come previsto su IE10 e FireFox (barre di scorrimento non interferenti), l'ho riscontrato solo su Chrome.

È possibile ottenere la dimensione della barra di scorrimento e quindi applicare un margine al contenitore.

Qualcosa come questo:

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 per rimuovere la barra di scorrimento h:

body{
    overflow-x:hidden;
}

Prova a dare un'occhiata a questo: http://jsfiddle.net/NQAzt/

DISCLAIMER : l' overlay è stato deprecato .
Puoi ancora usarlo se devi assolutamente, ma cerca di non farlo.

Funziona solo sui browser WebKit , ma mi piace molto. Si comporterà come autosu altri browser.

.yourContent{
   overflow-y: overlay;
}

Questo farà apparire la barra di scorrimento solo come una sovrapposizione , quindi non influenzerà la larghezza del tuo elemento!

Tutto quello che devi fare è aggiungere:

html {
    overflow-y: scroll;
}

Nel tuo file css in quanto questo avrà lo scroller se è necessario o meno, anche se non sarai in grado di scorrere

Ciò significa che il viewport avrà la stessa larghezza per entrambi

Probabilmente

html {
    width: 100vw;
}

è proprio quello che vuoi.

I browser Webkit come Safari e Chrome sottraggono la larghezza della barra di scorrimento dalla larghezza della pagina visibile durante il calcolo della larghezza: 100% o 100vw. Altro su Scrolling and Page Width di DM Rutherford .

Prova a usare overflow-y: overlayinvece.

Ho scoperto di poter aggiungere

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

direttamente al mio css e renderebbe invisibile la barra di scorrimento, ma mi permetterebbe comunque di scorrere (almeno su Chrome). Ottimo per quando non vuoi una barra di scorrimento che distragga sulla tua pagina!

Per i contenitori con una larghezza fissa, è possibile ottenere una soluzione cross browser CSS pura avvolgendo il contenitore in un altro div e applicando la stessa larghezza a entrambi i div.

#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;
}

Clicca qui per vedere un esempio su Codepen

Al momento non sembra che l'altra mia risposta funzioni correttamente (ma continuerò a provare a renderla operativa).

Ma fondamentalmente quello che devi fare, e quello che stava cercando di fare in modo dinamico, è impostare la larghezza del contenuto su leggermente inferiore a quella del riquadro principale scorrevole.
In modo che quando viene visualizzata la barra di scorrimento non ha alcun effetto sul contenuto.

Questo ESEMPIO mostra un modo più hacky per raggiungere questo obiettivo, codificando widths invece di cercare di convincere il browser a farlo per noi tramite padding.
Se questo è possibile, questa è la soluzione più semplice se non vuoi una barra di scorrimento permanente.

_{EDIT: questa risposta non è corretta al momento, fare riferimento alla mia altra risposta per vedere cosa stavo tentando di fare qui. Sto cercando di sistemarlo, ma se puoi offrire assistenza fallo nei commenti, grazie!}

L'utilizzo padding-rightmitigherà la comparsa improvvisa di una barra di scorrimento

ESEMPIO

Come puoi vedere dai punti, il testo arriva nello stesso punto della pagina prima del ritorno a capo, indipendentemente dalla presenza o meno di una barra di scorrimento.
Questo perché quando viene introdotta una barra di scorrimento, il riempimento si nasconde dietro di essa, quindi la barra di scorrimento non preme sul testo!

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

dove 300 px è la metà della larghezza della finestra di dialogo.

Questa è in realtà l'unica cosa che ha funzionato per me.

Ho avuto lo stesso problema su Chrome. È successo solo per me quando la barra di scorrimento è sempre visibile. (trovato nelle impostazioni generali) ho un modale e quando apro il modale ho notato che ...

body {
    padding-left: 15px;
}

viene aggiunto al corpo. Per evitare che ciò accada ho aggiunto

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

Non posso aggiungere commenti per la prima risposta ed è passato molto tempo ... ma quella demo ha un problema:

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

b.prop ('scrollHeight') è sempre uguale a b.height (),

Penso che dovrebbe essere così:

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

Infine vi consiglio un metodo:

html {
 overflow-y: scroll;
}

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

:root body {
  position: absolute;
}

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