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

Sıradaki ders: Z-index

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler