overflow: hidden scroll auto clip
Taşan içeriğin hidden, scroll, auto ve clip değerleriyle nasıl işleneceğini denetleyin.
overflow: hidden scroll auto clip, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
overflow Özeti
overflow, bir öğenin içeriği tanımlanan boyutları aştığında ne olacağını denetler. Aynı anda her iki eksene uygulanır (eksen başına denetim için overflow-x/overflow-y kullanın).
overflow: visible
visible (varsayılan) — içerik kutunun dışında görüntülenir. Blok Biçimlendirme Bağlamı (BFC) oluşturmaz. Diğer öğeler taşan içeriğin üzerine binebilir.
overflow: hidden
hidden, içeriği kutunun sınırında kırpar. Float'ları kapsayan ve kenar boşluklarının çökmesini önleyen bir BFC oluşturur. Yuvarlatılmış köşeli görsel kapsayıcılarında en yaygın kullanılan değerdir.
<div class="rounded-card"></div>overflow: scroll
scroll, içerik taşsa da taşmasa da kaydırma çubuklarını her zaman gösterir (bunları destekleyen eksenlerde). Kaydırma çubuğu oluklarının yerleşim kaymasını önlemek için her zaman bulunması gereken tutarlı kullanıcı arayüzlerinde kullanışlıdır.
<div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>overflow: auto
auto, kaydırma çubuklarını yalnızca içerik gerçekten taştığında gösterir. Gereksiz kaydırma çubuğu oluşturulmasını önlediği için çoğu kaydırılabilir kapsayıcıda scroll yerine tercih edilir.
<div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>overflow: clip
clip, içeriği hidden gibi kırpar ancak BFC oluşturmaz (NOT). Bu, float kapsamasını veya kenar boşluklarının çökmesini etkilemediği anlamına gelir. BFC'nin yan etkileri olmadan kırpma istediğinizde kullanın.
<div class="decorative-overflow"><div class="deco"></div></div>overflow-x ve overflow-y
Her ekseni bağımsız olarak denetleyin. Çok yaygın bir kullanım, geniş içerik (tablolar, kod) için yatay kaydırma sağlarken dikey taşmanın görünür kalmasıdır:
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>Taşma ve BFC
visible ve clip dışındaki herhangi bir değere taşma ayarlamak, bir Blok Biçimlendirme Bağlamı oluşturur. Bu, içteki float'ları kapsar, kenar boşluklarının çökmesinin dışarı sızmasını önler ve yeni bir kaydırma bağlamı oluşturur.
overflow: overlay (Standart Dışı)
overflow: overlay, kaydırma çubuğunu yerleşim alanı kaplamak yerine içeriğin üzerine çizer. Bazı tarayıcılarda standart dışı bir değerdi ve modern kaydırma çubuğu biçimlendirmesi lehine kullanımdan kaldırılıyor.
scrollbar-gutter
Yeni scrollbar-gutter: stable özelliği, gerekmediğinde bile kaydırma çubuğu için yer ayırarak içerik kaydırılabilir hâle geldiğinde oluşan yerleşim kaymasını önler.
<div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>Taşma ve Sabit Alt Öğeler
Yaygın bir hata şudur: overflow: hidden değerine sahip bir öğenin içindeki position: fixed değerine sahip alt öğe, position: absolute gibi davranır — sabit konum, kapsayan blokla ilişkilidir ve taşma yeni bir yığınlama bağlamı oluşturur.
Hızlı Kontrol
Hangi overflow değeri, Blok Biçimlendirme Bağlamı oluşturmadan içeriği kırpar?
Özet
visible (varsayılan) taşmaya izin verir. hidden içeriği kırpar ve BFC oluşturur. scroll kaydırma çubuklarını her zaman gösterir. auto kaydırma çubuklarını yalnızca gerektiğinde gösterir (tercih edilir). clip BFC oluşturmadan kırpar. Eksen başına denetim için overflow-x/y kullanın. Yerleşim kaymasını önlemek için scrollbar-gutter: stable kullanın.
Sıkça Sorulan Sorular
“overflow: hidden scroll auto clip” dersi ücretsiz mi?
Evet — “overflow: hidden scroll auto clip” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“overflow: hidden scroll auto clip” dersinde ne öğreneceğim?
Taşan içeriğin hidden, scroll, auto ve clip değerleriyle nasıl işleneceğini denetleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“overflow: hidden scroll auto clip” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type ve scroll-snap-align
- ::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme