Overflow scroll ve auto
overflow: scroll ve auto değerlerini öğrenirsin.
Her zaman kaydır: overflow: scroll
overflow: scroll değeri taşan içeriği kırpmaz; bunun yerine kaydırma çubuğu koyar. İçerik küçük olsa bile çubuk yine görünür. Böylece kullanıcı kaydırarak gizli kısmı görür.
Bu davranış bazı tasarımlarda tutarlılık sağlar: kutunun her zaman aynı boyutta kalması ve çubuğun her zaman durması isteniyorsa scroll seçilir. Olumsuz tarafı, gereksiz yere çubuk görünür ve estetik kaygı yaratır.
Akıllı kaydır: overflow: auto
overflow: auto değeri tarayıcının karar vermesine izin verir. İçerik sığıyorsa hiç çubuk görünmez; taşıyorsa çubuk otomatik eklenir. Çoğu durumda auto tercih edilir.
Örneğin bir not listesinin yüksekliğini max-height: 200px ile sınırladıysan, içerik kısa ise çubuk çıkmaz; uzun ise çubuk belirir ve liste kayar. Bu hem estetik hem de işlevsel olarak hoş bir denge kurar.
Uygulama Uzun listeyi akıllı kaydır
Bir .list sınıf seçicisi yaz ve içine overflow: auto bildirimi ekle. Böylece liste kısa ise çubuk çıkmaz, uzun olunca otomatik çubuk belirir.
Örnek çözümü göster
/* uzun listeyi kaydır */
.list {
overflow: auto;
}Kendini test et
-
scroll ile auto arasındaki fark nedir?
.a { overflow: scroll; } .b { overflow: auto; }- scroll içeriği kırpar, auto gösterir
- scroll her zaman çubuk koyar, auto yalnızca taşma olunca çubuk koyar
- auto her zaman çubuk koyar, scroll yalnızca taşma olunca koyar
- İkisi de aynıdır; adları farklıdır
Cevabı göster
scroll her zaman çubuk koyar, auto yalnızca taşma olunca çubuk koyar — Doğru. scroll her zaman çubuk gösterir; auto yalnızca içerik taşdığında çubuk gösterir.
-
Listeyi akıllı kaydır
.list { ____; }Cevabı göster
.list { overflow: auto; } -
Değeri davranışına eşle
- scroll
- Her zaman çubuk koyar
- auto
- Yalnızca taşınca çubuk koyar
- hidden
- Taşanı kırpar
- visible
- Taşanı bırakır