Nasıl OS için gizli olmaktan kaydırma çubukları önlemek X Y/izleme dörtgeni kullanıcılar göz kırpabilir miyim?
Mac üzerinde y/Blink (Safari/Chrome) varsayılan davranış bu yana OS X 10.7 (Lion) kullanımda olmadıkları zaman izleme dörtgeni kullanıcıların kaydırma çubuklarını gizlemek için. This can be confusing; kaydırma çubuğunu sık sık bir öğe kaydırılan sadece görsel bir ipucudur.
Örnek (jsfiddle)
HTML<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
Y (Chrome) Ekran Görüntüsü
Nasıl kaydırma çubuğu her zaman Y içinde kaydırılan bir öğe üzerinde gösterilmek için zorlayabilir miyim?
CEVAP
Bar Y ile kontrol edilebilir kaydırma görünümü -webkit-scrollbar
-elemanları sözde[blog]. Varsayılan görünümünü devre dışı bırakmak ve -webkit-appearance
ayarlayarak davranış[docs]none
.
Varsayılan stili kaldırma olduğun için de kendini ya da kaydırma çubuğunu hiç görünecektir stilini belirtmek gerekir. Aşağıdaki CSS çubukları: gizleme kaydırma görünümünü yeniden oluşturur
Örnek (jsfiddle)
CSS.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
Y (Chrome) Ekran Görüntüsü
Bir yığın izleme, nedir ve nasıl uygul...
Nasıl web sayfası yeniden konumlandırm...
Nasıl kullanıcılar sayfama erişmek içi...
Sadece kaydırma çubukları uzun bir par...
Nasıl PHP dosyaları için Eclipse PST ç...