Bu makale, CSS overflow-y özelliğinin kullanımını çok sayıda örnekle göstermektedir.
Overflow-y Özelliği CSS'de Nasıl Kullanılır?
CSS “ taşma-y ” özelliği, içeriğin bir öğe içindeki çapraz eksen boyunca taşmasını kontrol etmek için kullanılır. İçeriğin kırpılacağını veya içerik kabın yüksekliğini aştığında bir kaydırma çubuğu eklenip eklenmeyeceğini belirtir. Bu özellik için olası değerler ' görünür ”, “ gizlenmiş ”, “ taslak ', Ve ' Oto ”.
overflow-y özelliğinin daha iyi gösterilmesi için aşağıdaki örnekleri ziyaret edelim:
Örnek 1: Visible'ı Overflow-y Özelliği İçin Değer Olarak Kullanma
“ görünür ” değeri, içeriğin kaptan taşmasına izin verir ve herhangi bir kırpma veya kaydırma çubuğu eklemez. Aşağıdaki pratik kod bloğunu ziyaret edin:
>
>
>
Yukarıdaki kod bloğunun açıklaması:
- İlk olarak, bir 'değeri atayın ebeveyn ” “a sınıf ” özniteliği ve kullanımı “ stil ' bağlanmak.
- Ayrıca, “ değerini sağlayın görünür ” CSS'ye “ taşma-y ' mülk. Ve “ ile eşit olarak ayarlayın. stil ” özniteliği, CSS stilinin çalışmasını sağlar.
- Ardından, iç içe bir ' div ” element ve ona bir “ sınıfı atayın çocuk İçeriği ”. Ayrıca, sahte veriler sağlayın.
Şimdi, CSS overflow-y özelliğinin daha iyi anlaşılmasına yardımcı olan görselleştirmeyi geliştirmek için CSS özelliklerini kullanın:
.ebeveyn {Genişlik : 200 piksel ;
yükseklik : 150 piksel ;
sınır : 1 piksel sağlam siyah ;
}
.childContent {
yükseklik : 300 piksel ;
arka plan rengi : açık mavi ;
}
CSS özelliklerinin açıklaması aşağıda verilmiştir:
- İlk önce ' ebeveyn ” sınıfı seçilir ve “ değerleri 200 piksel ”, “ 150 piksel ', Ve ' 1 piksel düz siyah ” CSS'ye atanır “ Genişlik ”, “ yükseklik ', Ve ' sınır ” özellikleri sırasıyla.
- Ardından, “ çocuk İçeriği ” sınıfı ve “ değerlerini ayarlayın 300 piksel ' Ve ' açık mavi ” CSS'ye “ yükseklik ' Ve ' arka plan rengi ” özellikleri sırasıyla. Bu sınıf, “ ebeveyn ' CSS tarafından kontrol edilen sınıf ' taşma ' mülk.
Kod parçacıklarının derlenmesinden sonra web sayfası şöyle görünür:
Anlık görüntü, taşma içeriğinin artık görünür durumda olduğunu ve kaydırma çubuğu veya kırpmanın varsayılan olarak eklenmediğini gösterir.
Örnek 2: Gizli'yi Overflow-y Özelliği İçin Değer Olarak Kullanma
“ taşma-y 'değeri olan özellik' gizlenmiş ” üst kabının dışına taşınan tüm içeriği gizler. Bu özellik kaydırma çubukları eklemez, bunun yerine taşan içeriği kırpar:
>
>
Yukarıdaki kod parçacığı şunları içerir:
- İlk olarak, iç div öğesinin içine yerleştirilen kukla içeriğin artmasıyla aynı kod tekrar eklenir.
- Ardından, “ değerini değiştirin taşma-y ' mülk ' gizlenmiş ” “a “ sınıfına sahip etiket ebeveyn ”.
Yeniden oluşturduktan sonra web sayfası şöyle görünür:
Anlık görüntü, taşan içeriğin kırpıldığını gösterir.
Örnek 3: Scroll'u Overflow-y Özelliği İçin Değer Olarak Kullanma
“ değerinin ayarlanması taşma-y ” mülkiyet “ taslak ”, son kullanıcının
onu aşan içerik. Aşağıdaki kod bloğunu ziyaret edelim:
= 'ebeveyn' stil = 'taşma-y: kaydırma;' >
= 'çocuk İçeriği' > Bu sadece kukla içerik görünür olarak ayarlandığında taşma-y özelliğinin gösterimi için kullanılır. Bu sadece kukla içerik görünür olarak ayarlandığında taşma-y özelliğinin gösterimi için kullanılır.
>
>Yukarıdaki kod bloğunda:
- İlk olarak, aynı HTML yapısı “ içine eklenmiştir.
' etiket. - Ardından, “ değerini değiştirin taşma-y ” mülkiyet “ taslak ”. Bu, “ ebeveyn Taşan içeriği kontrol etmek için kaydırma efektini etkinleştirmek için ” div.
Yukarıdaki kod bloğunun derlenmesinden sonra web sayfası şöyle görünür:
Yukarıdaki gid, taşan içeriği kontrol etmek için kaydırma efektinin mevcut olduğunu göstermektedir.
Örnek 4: Overflow-y Özelliği için Otomatik'i Değer Olarak Kullanma
Bu örnekte, kullanıcılar yalnızca içerik kapsayıcıya sığmıyorsa bir kaydırma çubuğu ekleyebilir. Ayrıca, içerik taşmazsa kaydırma çubuğu eklenmez. değeri sağlanarak mümkündür. Oto ” CSS'ye “ taşma-y ' mülk:
= 'ebeveyn' stil = 'taşma-y: otomatik;' >
= 'çocuk İçeriği' > Bu sadece kukla içerik görünür olarak ayarlandığında taşma-y özelliğinin gösterimi için kullanılır. Bu sadece kukla içerik görünür olarak ayarlandığında taşma-y özelliğinin gösterimi için kullanılır.
>
>Yukarıdaki kod bloğunda:
- İlk olarak, aynı HTML dosyasını “
' etiket. - Ardından, “ değerini güncelleyin taşma-y ' mülk ' Oto ”. İçeriğin dikey uzunluğuna göre kaydırma efekti sağlar.
Derleme işlemi bittikten sonra web sayfası şu şekilde çalışır:
Yukarıdaki gif, içeriğin uzunluğuna göre kaydırma çubuğunu etkinleştiren taşma özelliğini gösterir.
Çözüm
CSS “ taşma-y ” özelliği, bir öğe içindeki çapraz eksen boyunca taşan içeriği kontrol etmek için kullanılır. overflow-y özelliği, içeriği overflow-y özelliklerine sağlanan belirli değere göre kontrol eder. “ görsel ” değeri taşan içeriği, “ gizlenmiş ” değeri, taşan içeriği gizler ve “ taslak ” değeri, içeriği kontrol etmek için bir kaydırma çubuğu ekler. Ve eğer değer “ Oto Kaydırma çubuğu, içeriğin uzunluğuna göre ekler veya kaldırır.
- İlk olarak, aynı HTML yapısı “ içine eklenmiştir.