Cegah scroll-bar dari penambahan ke Lebar halaman di Chrome

Saya mengalami masalah kecil saat mencoba menjaga halaman .html saya pada lebar yang konsisten di Chrome, Misalnya saya memiliki halaman (1) dengan banyak konten yang melebihi tinggi viewport (kata yang tepat?), Jadi ada scroll bar vertikal di halaman itu (1). Pada halaman (2) saya memiliki tata letak yang sama (menu, divs, ... dll) tetapi lebih sedikit konten, jadi tidak ada scroll-bar vertikal di sana.

Masalahnya adalah bahwa pada halaman (1) scroll-bar tampaknya mendorong elemen sedikit ke kiri (menambah lebar?) Sementara semuanya tampak baik di tengah halaman (2)

Saya masih pemula di HTML / CSS / JS, dan saya cukup yakin bahwa ini tidak terlalu sulit, tetapi saya tidak beruntung menemukan solusinya. Ini berfungsi sebagaimana mestinya pada IE10, dan FireFox (bilah gulir yang tidak mengganggu), saya hanya menemukan ini di Chrome.

Anda bisa mendapatkan ukuran scrollbar dan kemudian menerapkan margin ke wadah.

Sesuatu seperti ini:

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 untuk menghapus h-scrollbar:

body{
    overflow-x:hidden;
}

Coba lihat ini: http://jsfiddle.net/NQAzt/

DISCLAIMER : overlay sudah tidak digunakan lagi .
Anda masih dapat menggunakan ini jika benar-benar harus, tetapi cobalah untuk tidak melakukannya.

Ini hanya berfungsi di browser WebKit , tetapi saya sangat menyukainya. Akan berperilaku seperti autodi browser lain.

.yourContent{
   overflow-y: overlay;
}

Ini akan membuat bilah gulir hanya muncul sebagai hamparan , sehingga tidak memengaruhi lebar elemen Anda!

Yang perlu Anda lakukan hanyalah menambahkan:

html {
    overflow-y: scroll;
}

Dalam file css Anda karena ini akan memiliki penggulung apakah diperlukan atau tidak meskipun Anda tidak akan dapat menggulir

Artinya viewport akan memiliki lebar yang sama untuk keduanya

Mungkin

html {
    width: 100vw;
}

hanya apa yang Anda inginkan.

Browser Webkit seperti Safari dan Chrome mengurangi lebar bilah gulir dari lebar halaman yang terlihat saat menghitung lebar: 100% atau 100vw. Lebih lanjut di DM Rutherford's Scrolling dan Page Width .

Coba gunakan overflow-y: overlaysebagai gantinya.

Saya menemukan saya bisa menambahkan

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

langsung ke css saya dan itu akan membuat bilah gulir tidak terlihat, tetapi masih memungkinkan saya untuk menggulir (setidaknya di Chrome). Bagus untuk saat Anda tidak ingin scrollbar mengganggu halaman Anda!

Untuk penampung dengan lebar tetap, solusi lintas browser CSS murni dapat dilakukan dengan menggabungkan penampung ke dalam div lain dan menerapkan lebar yang sama ke kedua 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;
}

Klik di sini untuk melihat contoh di Codepen

Sepertinya jawaban saya yang lain tidak berfungsi dengan baik saat ini (tetapi saya akan terus mencoba membuatnya beroperasi).

Tetapi pada dasarnya apa yang perlu Anda lakukan, dan apa yang coba dilakukannya secara dinamis, adalah menyetel lebar konten menjadi sedikit lebih kecil dari induk, panel yang dapat digulir.
Sehingga saat muncul scrollbar tidak berpengaruh pada konten.

CONTOH ini menunjukkan cara yang lebih hack untuk mencapai tujuan itu, dengan melakukan hardcoding widthdaripada mencoba membuat browser melakukannya untuk kita melalui padding.
Jika ini memungkinkan, ini adalah solusi paling sederhana jika Anda tidak menginginkan scrollbar permanen.

_{EDIT: jawaban ini kurang tepat saat ini, lihat jawaban saya yang lain untuk melihat apa yang saya coba lakukan di sini. Saya mencoba memperbaikinya, tetapi jika Anda dapat menawarkan bantuan, lakukan di komentar, terima kasih!}

Menggunakan padding-rightakan mengurangi kemunculan scrollbar yang tiba-tiba

CONTOH

Seperti yang Anda lihat dari titik-titik, teks membuatnya ke titik yang sama di halaman sebelum dibungkus, terlepas dari apakah scrollbar ada atau tidak.
Ini karena ketika scrollbar diperkenalkan, padding bersembunyi di belakangnya, sehingga scrollbar tidak menekan teks!

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

di mana 300 px adalah setengah dari lebar jendela dialog saya.

Ini sebenarnya satu-satunya hal yang berhasil untuk saya.

Saya memiliki masalah yang sama di Chrome. Itu hanya terjadi pada saya ketika bilah gulir selalu terlihat. (Ditemukan di pengaturan umum) Saya memiliki modal dan ketika saya membuka modal saya perhatikan bahwa ...

body {
    padding-left: 15px;
}

ditambahkan ke tubuh. Untuk menghentikan ini terjadi, saya menambahkan

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

Saya tidak bisa menambahkan komentar untuk jawaban pertama dan sudah lama ... tapi demo itu bermasalah:

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

b.prop ('scrollHeight') selalu sama dengan b.height (),

Saya pikir seharusnya seperti ini:

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

Akhirnya saya merekomendasikan sebuah metode:

html {
 overflow-y: scroll;
}

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

:root body {
  position: absolute;
}

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