CSS overflow Özelliği
overflow özelliği, bir öğenin içeriğinin belirtilen bir alana sığmayacak kadar büyük olması durumunda içeriğin kırpılıp kırpılmayacağını veya kaydırma çubukları eklenip eklenmeyeceğini belirler. Yalnızca belirli bir yüksekliğe sahip blok elemanları için çalışır.
Yapısı (Syntax)overflow: visible | hidden | scroll | auto | initial | inherit;
| Varsayılan Değer | visible |
| JavaScript Yapısı |
object.style.overflow="Değer"
|
| Animasyon Özellikleri Uygulanabilir | Hayır (Daha fazla detay) |
Değerler
| Değer | Açıklama | Versiyon |
|---|---|---|
| visible | Varsayılan değer. | CSS2 |
| hidden | İçeriğin geri kalanını görünmez yapar. | CSS2 |
| scroll | Taşma kırpılır, ancak içeriğin geri kalanını görmek için bir kaydırma çubuğu eklenir. | CSS2 |
| auto | Taşma kırpılırsa, içeriğin geri kalanını görmek için kaydırma çubuğu eklenmelidir. | CSS2 |
| initial | Varsayılan değerine geri döndürür. | CSS2 |
| inherit | Değerini üst öğesinden miras alır. | CSS2 |
Örnekler
100px değerinde yükseklik belirledik, belirlediğimiz yüksekliği geçen yazılar için hem dikey, hem de yatay kaydırma çubuğu çıkmış olacak. overflow: auto; dan farkı ise yatay çubuğunda çıkmasıdır.
.element {
width: 500px;
height: 100px;
overflow: scroll;
background: #f00;
}100px değerinde yükseklik belirledik, belirlediğimiz yüksekliği geçen yazılar element sınıfının içerisinde kaldığı için belirlediğimiz yükseklikten sonraki yazılar görünmeyecek.
.element {
width: 500px;
height: 100px;
overflow: hidden;
background: #f00;
}100px değerinde yükseklik belirledik, yazımız bu yüksekliği geçer ise kaydırma çubuğu çıkar ve o yükseklik doğrultusunda, kaydırma çubuğu ile kaydırılarak yazı görünür.
.element {
width: 500px;
height: 100px;
overflow: auto;
background: #f00;
}