CSS Academy · Ders

Taşma: Scroll, Clip ve Auto

İçerik kapsayıcısını aştığında ne olacağını overflow özelliklerini kullanarak denetleyin.

Taşma: Scroll, Clip ve Auto, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. 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.

Taşma Nedir?

Taşma, bir öğenin içeriği tanımlanan boyutlardan daha büyük olduğunda ortaya çıkar. overflow özelliği bu fazla içeriğe ne olacağını denetler.

overflow: visible (Varsayılan)

Varsayılan olarak içerik taşar ve öğenin kutusunun dışında görünür. Bu durum, içeriğin kardeş öğelerin üzerine binmesine veya görünüm alanının dışına çıkmasına neden olabilir.

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

overflow: hidden, öğenin sınırlarının dışına taşan tüm içeriği kırpar. Kırpılan içeriğe erişilemez ve bu içerik kaydırılamaz.

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

overflow: scroll, içerik sığsa bile kaydırma çubuklarını her zaman gösterir. İçerik boyutundan bağımsız olarak tutarlı bir arayüz istediğinizde bunu kullanın.

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

overflow: auto, kaydırma çubuklarını yalnızca içerik gerçekten taştığında gösterir. Gereksiz kaydırma çubuğu kanallarını önlemek için genellikle scroll yerine tercih edilir.

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

overflow: clip, hidden değerine benzer ancak daha katıdır: blok biçimlendirme bağlamı oluşturmaz ve JavaScript ile kaydırılamaz. Performansı güvenli biçimde koruyarak kırpma yapmak için idealdir.

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x ve overflow-y

Her ekseni bağımsız olarak denetleyebilirsiniz. Yaygın bir yaklaşım, kod veya tablolar gibi geniş içerikler için yatay kaydırmaya izin verir:

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

Kaydırılabilir Kapsayıcı Deseni

Kaydırılabilir bir kapsayıcı oluşturmak için hem sabit bir yüksekliğe hem de overflow: auto veya scroll değerine ihtiyacınız vardır:

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

overflow ile Blok Biçimlendirme Bağlamı

overflow değerini visible dışındaki herhangi bir değere ayarlamak bir blok biçimlendirme bağlamı (BFC) oluşturur. Bu, iç kayan öğeleri kapsar ve kenar boşluklarının kapsayıcı dışına taşarak birleşmesini önler.

Kaydırmanın Zincirlenmesi

Kaydırılabilir bir kapsayıcı sınırına kadar kaydırıldığında, kaydırma olayları üst öğeye zincirlenebilir. Bunu önlemek için overscroll-behavior: contain kullanın.

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow ve overflow karşılaştırması

text-overflow: ellipsis, bir öğenin içindeki metinle ilgilidir ve çalışması için overflow: hidden + white-space: nowrap gerektirir. overflow ise öğenin kendi taşma davranışını denetler.

Hızlı Kontrol

İçerik gerçekten taştığında yalnızca o zaman kaydırma çubuklarını gösteren overflow değeri hangisidir?

Özet

overflow: hidden içeriği kırpar. overflow: auto yalnızca gerektiğinde kaydırma çubukları ekler (tercih edilen değer). overflow: scroll kaydırma çubuklarını her zaman gösterir. overflow: clip yeni bir biçimlendirme bağlamı oluşturmadan içeriği kırpar. Eksenleri ayrı ayrı denetlemek için overflow-x/y kullanın.

Sıkça Sorulan Sorular

“Taşma: Scroll, Clip ve Auto” dersi ücretsiz mi?

Evet — “Taşma: Scroll, Clip ve Auto” 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.

“Taşma: Scroll, Clip ve Auto” dersinde ne öğreneceğim?

İçerik kapsayıcısını aştığında ne olacağını overflow özelliklerini kullanarak 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 3. dersidir.

“Taşma: Scroll, Clip ve Auto” 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

← CSS Academy Sayfasına Dön