Ana kaydırma çubuğunu her zaman görünür yapma

Bir kullanıcı bir web sayfasını ziyaret ettiğinde (sayfada kaydırma çubuğunun etkinleştirilmesini tetiklemek için yeterli içerik olmadığında) tarayıcının dikey kaydırma çubuğunun görünür kalmasını sağlamak için hangi CSS gereklidir?

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

Bu, kaydırma çubuğunu her zaman görünür ve yalnızca gerektiğinde etkin hale getirir.

Güncelleme: Yukarıdaki işe yaramazsa, sadece bunu kullanarak olabilir.

html {
    overflow-y:scroll;
}

Taşmanın "otomatik" değil "kaydırma" olarak ayarlandığından emin olun. Bununla birlikte , OS X Lion'da "kaydırma" olarak ayarlanan taşma, kaydırma çubuklarının yalnızca kullanıldığında yine de görüneceği için otomatik gibi davranır. Yukarıdaki çözümlerden herhangi biri işe yaramıyorsa, nedeni bu olabilir.

Bunu düzeltmek için ihtiyacınız olan şey:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Varsayılanı beğenmezseniz buna göre stil uygulayabilirsiniz.

Son yıllarda işler değişti. Yukarıdaki cevaplar artık her durumda geçerli değildir. Apple kaybolan kaydırma çubuklarını her yere itiyor . MacO'larda (ve iO'larda) Safari, Chrome ve hatta Firefox yalnızca gerçekten kaydırma yaparken kaydırma çubuklarını gösterir - Geçerli Windows / IE hakkında bilmiyorum. Ancak Webkit'te kaydırma çubuklarını biçimlendirmenin standart dışı yolları vardır (IE uzun zaman önce düştü).

html {
    overflow-y: scroll;
}

İstediğin bu mu?

Ne yazık ki, Opera 9.64, CSS bildirimini uygulandığında HTMLveya BODYgibi diğer blok düzeyindeki öğeler için çalışmasına rağmen yok sayıyor gibi görünüyor DIV.

html {height: 101%;}

Kullandığım bu çapraz tarayıcılar çözümü notu (: o quirksmode çalışır diye hep 1 hattında DOCTYPE bildirimini kullanın Bilmiyorum, bunu test asla ).

Bu, her sayfada her zaman AKTİF dikey kaydırma çubuğu görüntüler , dikey kaydırma çubuğu yalnızca birkaç piksel kaydırılabilir.

Sayfa içeriği tarayıcının görünür alanından (görünüm bağlantı noktası) daha kısa olduğunda, dikey kaydırma çubuğunun etkin olduğunu görürsünüz ve yalnızca birkaç piksel kaydırılabilir.

Bu çözümü kullanarak CSS doğrulamasına takıntılı olmanız durumunda (yalnızca HTML doğrulamasıyla obez oldum), CSS kodunuz W3C için de geçerli olacaktır çünkü -moz-scrollbars-vertical

body { height:101%; } daha büyük sayfaları "kırpacaktır".

Bunun yerine şunu kullanıyorum:

body { min-height:101%; }

Bunu vücut etiketine ekleyerek çalıştırabildim. Benim için daha hoş oldu çünkü html elemanında hiçbir şey yok.

body {
    overflow-y: scroll;
}

Alternatif bir yaklaşım, html öğesinin genişliğini 100vw olarak ayarlamaktır. Çoğu tarayıcıda olmasa da birçoğunda, bu, kaydırma çubuklarının genişlik üzerindeki etkisini ortadan kaldırır.

html { width: 100vw; }

Yüksekliği% 101 olarak ayarlamak, benim sorunumun çözümü. Artık görünüm alanı yüksekliğini aşan ve geçmeyen sayfalar arasında geçiş yaptığınızda sayfalarınız artık 'kaymaz'.

body { 
    min-height: 101vh; 
} 

benim için en iyisi

Bunu yapıyorum:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

O zaman gerekmediğinde çirkin gri renkli kaydırma çubuğuna bakmak zorunda değilim.