Chrome'da kaydırma çubuğunun sayfa genişliğine eklenmesini önleyin

Chrome'da .html sayfalarımı tutarlı bir genişlikte tutmaya çalışırken küçük bir sorunum var, Örneğin, çok sayıda içeriğe sahip bir sayfam (1), görüntü alanının (doğru kelime?) Yüksekliğini aşıyor, dolayısıyla dikey bir kaydırma çubuğu var bu sayfada (1). Sayfa (2) 'de aynı düzene sahibim (menüler, div'ler, ... vb.) Ancak daha az içeriğe sahibim, bu yüzden dikey kaydırma çubukları yok.

Sorun şu ki, sayfa (1) 'de kaydırma çubukları öğeleri hafifçe sola itiyor (genişliğe ekleniyor mu?) Ve her şey sayfada (2) iyi ortalanmış görünüyor.

Hala HTML / CSS / JS konusunda yeni başlayan biriyim ve bunun o kadar da zor olmadığına oldukça ikna oldum, ancak çözümü bulmakta hiç şansım olmadı. IE10'da ve FireFox'ta (karışmayan kaydırma çubukları) amaçlandığı gibi çalışıyor, bununla yalnızca Chrome'da karşılaştım.

Kaydırma çubuğu boyutunu alabilir ve ardından kaba bir kenar boşluğu uygulayabilirsiniz.

Bunun gibi bir şey:

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'});
    }
}

H-kaydırma çubuğunu kaldırmak için CSS:

body{
    overflow-x:hidden;
}

Şuna bir göz atmayı deneyin: http://jsfiddle.net/NQAzt/

REDDİ : bindirme olmuştur kullanımdan kaldırıldı .
Kesinlikle mecbur kalırsan bunu yine de kullanabilirsin ama kullanmamaya çalış.

Bu yalnızca WebKit tarayıcılarında çalışır , ancak ben onu çok seviyorum. autoDiğer tarayıcılardaki gibi davranacak .

.yourContent{
   overflow-y: overlay;
}

Bu, kaydırma çubuğunun yalnızca bir kaplama olarak görünmesini sağlar , böylece öğenizin genişliğini etkilemez !

Tek yapmanız gereken eklemek:

html {
    overflow-y: scroll;
}

Css dosyanızda bu, gerekli olup olmadığına bakılmaksızın kaydırıcıya sahip olacak, ancak sadece kaydırma yapamayacaksınız.

Bu, görüntü alanının her ikisi için de aynı genişliğe sahip olacağı anlamına gelir.

Muhtemelen

html {
    width: 100vw;
}

tam istediğin şey.

Safari ve Chrome gibi Webkit tarayıcıları, genişliği hesaplarken kaydırma çubuğu genişliğini görünür sayfa genişliğinden çıkarır:% 100 veya 100vw. Daha fazlası DM Rutherford'un Kaydırma ve Sayfa Genişliği .

Onun overflow-y: overlayyerine kullanmayı deneyin .

Ekleyebileceğimi buldum

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

doğrudan css'me ve kaydırma çubuğunu görünmez hale getirir, ancak yine de kaydırmama izin verir (en azından Chrome'da). Sayfanızda dikkat dağıtıcı bir kaydırma çubuğu istemediğinizde kullanışlıdır!

Sabit genişliğe sahip kapsayıcılar için , kapsayıcı başka bir div'e sarılıp her iki div'e aynı genişlik uygulanarak saf bir CSS çapraz tarayıcı çözümü gerçekleştirilebilir.

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

Codepen ile ilgili bir örnek görmek için buraya tıklayın

Diğer cevabım şu anda pek işe yaramıyor gibi görünüyor (ama yine de onu işlevsel hale getirmeye çalışacağım).

Ama temelde yapmanız gereken ve dinamik olarak yapmaya çalıştığı şey, içeriğin genişliğini ana kaydırılabilir bölmeden biraz daha az olacak şekilde ayarlamaktır.
Böylece, kaydırma çubuğu göründüğünde içerik üzerinde hiçbir etkisi olmaz.

Bu ÖRNEK , widthtarayıcının bunu bizim için yapmasını sağlamaya çalışmak yerine, URL'leri kodlayarak bu hedefe ulaşmanın daha hilekâr bir yolunu göstermektedir padding.
Bu mümkünse, kalıcı bir kaydırma çubuğu istemiyorsanız bu en basit çözümdür.

_{DÜZENLE: Bu cevap şu anda pek doğru değil, burada ne yapmaya çalıştığımı görmek için diğer cevabıma bakın. Düzeltmeye çalışıyorum, ancak yardım sunabilirseniz, yorumlarda bunu yapın, teşekkürler!}

Kullanımı padding-right, bir kaydırma çubuğunun aniden ortaya çıkmasını azaltır.

MİSAL

Noktalardan da görebileceğiniz gibi, bir kaydırma çubuğu olup olmadığına bakılmaksızın metin, kaydırmadan önce sayfada aynı noktaya gelir.
Bunun nedeni, bir kaydırma çubuğu tanıtıldığında dolgunun arkasında gizlenmesidir, böylece kaydırma çubuğu metni itmez!

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

300 piksel, iletişim penceresi genişliğimin yarısıdır.

Aslında benim için işe yarayan tek şey bu.

Aynı sorunu Chrome'da yaşadım. Benim için sadece kaydırma çubuğu her zaman görünür olduğunda oldu. (genel ayarlarda bulundu) Bir modelim var ve modeli açtığımda fark ettim ...

body {
    padding-left: 15px;
}

gövdeye eklenir. Bunun olmasını engellemek için ekledim

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

İlk cevap için yorum ekleyemiyorum ve uzun zaman oldu ... ama bu demoda bir sorun var:

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

b.prop ('scrollHeight') her zaman b.height () 'a eşittir,

Bence şöyle olmalı:

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

Sonunda bir yöntem öneriyorum:

html {
 overflow-y: scroll;
}

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

:root body {
  position: absolute;
}

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