CSS “ taşma ” özelliği, seçilen HTML öğesinin içeriğinin taşmasını kontrol etmek için kullanılır. İçerik, “” yardımıyla belirli bir yönde kontrol edilebilir. taşma-y ' Ve ' taşma-x ' özellikler. 'taşma' özelliği, ' gibi değerleri kabul eder. taslak ”, “ görünür ”, “ gizlenmiş ' Ve ' Oto ” ve işlevsellik açısından birbirlerinden farklılık gösterirler. Ancak bu kılavuz, pratik örnekler kullanarak overflow:scroll ve overflow:auto arasındaki farkı gösterir.
Overflow:scroll Overflow:auto'dan Nasıl Farklıdır?
“arasındaki temel fark taslak ' Ve ' Oto ” değerler, “ taşma:kaydırma ” gerekli olsun ya da olmasın her zaman bir kaydırma çubuğu gösterir, bu da görsel bir dikkat dağıtıcı oluşturur. Öte yandan, “ taşma:otomatik ” yalnızca içerik taştığında kaydırma çubuğunu görüntüler. Bu şekilde, kullanıcının dikkatini kolayca çeken daha temiz ve daha akıcı bir tasarım oluşturulabilir.
Örnek 1: overflow:scroll Özelliğini Kullanma
CSS “ taşma:kaydırma ” özelliği, taşan içeriği kontrol etmek için kaydırma çubuğunu varsayılan olarak ayarlar. Taşma içeriğini görmez ve ardından kaydırma çubuğunu uygular. Bunun yerine, kodun derlenmesinden sonra yatay ve dikey bir kaydırma çubuğu görüntüler, ancak kullanıcı, tasarımın gereksinimlerine göre yalnızca bir yan kaydırma çubuğunu değiştirebilir ve görüntüleyebilir.
'overflow:scroll' özelliğini kullanmak için aşağıdaki kodu ziyaret edin:
< div >
< h3 > Örnek için Taşma:kaydırma h3 >
< div sınıf = 'scrollingBox kaydırma' >
< P > Bu sadece kullanılan sahte içeriktir için taşma-y özellik değeri kaydırma ve otomatik arasındaki farkın gösterimi.
P >
div >
div >
Yukarıdaki kod bloğunda:
- İlk olarak, kök ' div ” element oluşturulur ve iç içe geçmiş “ öğesini kullanır. ” etiketi koyun.
- Ardından, “ sınıflarını atayın kaydırma Kutusu ' Ve ' taslak ” önceden oluşturulmuş iç içe geçmişe “
' etiket.- Son olarak, “ ' Ve ' ” içindeki etiketler div ' elementler.
HTML yapısının oluşturulmasından sonra, CSS taşma özelliğini uygulayın:
< stil >
.scrollingBox {
genişlik: 300 piksel;
yükseklik: 150 piksel;
kenarlık: 1 piksel koyu gri;
}
.taslak {
taşma: kaydırma;
}
stil >Yukarıdaki CSS kodunun açıklaması:
- İlk olarak, “ kaydırma Kutusu ” sınıflandırın ve “ değerlerini sağlayın 300 piksel ”, “ 150 piksel ' Ve ' 1 piksel katı koyu gri ” CSS'ye “ Genişlik ”, “ yükseklik ', Ve ' sınır ' özellikler. Bu özellikler daha iyi bir görselleştirme süreci için kullanılır.
- Sonra, “ taslak ” sınıf seçilir ve “ değeri taslak ” CSS'ye aktarılır “ taşma ' mülk.
Derleme aşamasının bitiminden sonra:
Yukarıdaki çıktı, içeriğin taşmadığını ancak kaydırma çubuğunun hem X hem de Y eksenine eklendiğini gösterir.
Örnek 2: overflow:auto Özelliğini Kullanma
overflow:auto özelliği, overflow:scroll gibidir çünkü her ikisi de kaydırma çubuğunu görüntüleyebilir. Tek fark, “ taşma:otomatik ” içerik taştığında bir kaydırma çubuğu ekler ve içerik taşmıyorsa kaydırma çubuğu eklenmez. Dinamik olarak değişen doğası nedeniyle çoğunlukla duyarlı web tasarımı oluşturulurken kullanılır.
Örneğin, aşağıdaki kodu ziyaret edin:
< div sınıf = 'otomatik örnek' >
< h3 > Örnek için Taşma:otomatik h3 >
< div sınıf = 'kaydırma Kutusu' stil = 'taşma: otomatik' >
< P > Bu sadece kullanılan sahte içeriktir için taşma-y özellik değeri kaydırma ve otomatik arasındaki farkın gösterimi.
P >
div >
div >Yukarıdaki kod bloğunda:
- İlk olarak, aynı HTML yapısından yararlanılır ve kukla veriler “ h3 ', Ve ' P ” öğeleri değiştirilir.
- Sonra, “ stil ” özniteliği, iç içe geçmiş “ ile birlikte kullanılır. div ” öğesi ve “ değerini ayarlar Oto ” CSS'ye “ taşma ' mülk.
İnfazın ardından “ div ” öğesi artık şu şekilde görünür:
Yukarıdaki anlık görüntü, kaydırma çubuğunun içeriğin uzunluğuna göre eklenmediğini göstermektedir.
Şimdi, “ hakkında biraz daha açıklık için taşma:otomatik ' mülk. Yuvalanmış ' için büyük miktarda veri sağlamayı deneyin. div ” öğesi. Kodu güncelledikten sonra web sayfası şöyle görünür:
Çıktı, taşan içeriğin varlığı nedeniyle kaydırma çubuğunun artık eklendiğini doğrular.
Çözüm
“ taşma:kaydırma ' Ve ' taşma:otomatik ” özellikleri, kaydırma çubuğunu ekledikleri durumda farklılık gösterir. “overflow:scroll”, içerik taşsa da taşmasa da her zaman bir kaydırma çubuğu gösterir. 'overflow:auto' yalnızca seçili HTML öğesinin içeriği taştığında bir kaydırma çubuğu gösterir. CSS'nin değeri ' taşma ” özelliği, belirli tasarım ve kullanıcı deneyimi gereksinimlerine bağlıdır. Bu makale, 'overflow:scroll' ve 'overflow:auto' özellikleri arasındaki farkı göstermiştir.
- Ardından, “ sınıflarını atayın kaydırma Kutusu ' Ve ' taslak ” önceden oluşturulmuş iç içe geçmişe “