Taşma

İçerik, üst öğesinin dışına çıktığında bu durumu yönetmek için birçok seçeneğiniz vardır. Ek alan eklemek için kaydırabilir, taşkın kenarları kırpabilir, kesme noktasını üç noktayla belirtebilir ve daha pek çok işlem yapabilirsiniz. Taşma, özellikle telefon uygulamaları ve birden fazla ekran boyutu için geliştirme yaparken dikkate alınması gereken önemli bir konudur.

CSS'de iki farklı kırpma seçeneği vardır; text-overflow, tek tek metin satırları için yardımcı olur ve overflow özellikleri, kutu modelindeki taşmayı kontrol etmeye yardımcı olur.

text-overflow ile tek satırda taşma

Metin düğümü içeren tüm öğelerde(ör. paragraf, <p>) text-overflow özelliğini kullanın. Metin, öğenin mevcut alanına sığmadığında nasıl görüneceğini belirtir. Bir sayfadaki tüm görüntülenebilir HTML metni metin düğümlerinde bulunur. text-overflow'ü kullanmak için tek bir sarmalanmış metin satırına ihtiyacınız vardır. Bu nedenle, overflowhidden olarak ayarlamanız ve sarmalmayı engelleyen bir white-space değerine sahip olmanız gerekir.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Taşma mülklerini kullanma

Taşma özellikleri, alt öğelerinin mevcut alandan daha fazla alana ihtiyaç duyduğunda ne olacağını kontrol etmek için bir öğede ayarlanır. Bu durum, kullanıcının belirli bir boyuta kırpılmış büyük bir görüntünün etrafında gezindiği Google Haritalar gibi etkileşimli bir haritada olduğu gibi kasıtlı olabilir. Bu durum, kullanıcının metin balonuna sığmayan uzun bir mesaj yazdığı sohbet uygulamalarında olduğu gibi istenmeden de gerçekleşebilir.

Taşmayı iki bölüme ayırabilirsiniz. Üst öğenin, değişmeyen, sıkıca sınırlanmış bir alanı vardır. Bunu bir pencere olarak düşünebilirsiniz. Alt öğeler, üst öğeden daha fazla alan isteyen içeriklerdir. Bunu pencereden baktığınız şey olarak düşünebilirsiniz. Taşmayı yönetmek, pencerenin bu içeriği nasıl çerçeveleyeceğini belirlemenize yardımcı olur.

Dikey ve yatay eksende kaydırma

overflow-y mülkü, cihaz görüntü alanının dikey ekseni boyunca fiziksel taşmayı kontrol eder ve bu nedenle yukarı ve aşağı kaydırma işlemini gerçekleştirir.

overflow-x mülkü, cihaz görüntü alanının yatay ekseni boyunca taşmayı kontrol eder ve böylece sola ve sağa kaydırma işlemini gerçekleştirir.

Kaydırma yönü için mantıksal özellikler

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

overflow-inline ve overflow-block mülkleri, taşmayı doküman yönüne ve yazma moduna göre ayarlar.

overflow kısayolu

overflow kısaltması, hem overflow-x hem de overflow-y stillerini tek bir satırda ayarlar:

overflow: hidden scroll;

İki anahtar kelime belirtilirse ilk anahtar kelime overflow-x için, ikinci anahtar kelime ise overflow-y için geçerli olur. Aksi takdirde hem overflow-x hem de overflow-y aynı değeri kullanır.

Değerler

overflow mülkleri için kullanılabilen değerleri ve anahtar kelimeleri daha yakından inceleyelim.

overflow: visible (varsayılan)
Özellik ayarlanmadığında web için varsayılan değer overflow: visible olur. Bu sayede içerik hiçbir zaman yanlışlıkla gizlenmez ve "içerikleri hiçbir zaman gizleme" veya "kesin düzenlerin güvenli düzenleri" temel ilkelerine uyulur.
overflow: hidden
overflow: hidden ile içerik belirtilen yönde kırpılır ve gösterilmesi için kaydırma çubukları sağlanmaz.
overflow: scroll
overflow: scroll, kullanıcıların içerikte kaydırmasına olanak tanımak için kaydırma çubuklarını etkinleştirir. İçerik şu anda taşmasa bile kaydırma çubukları gösterilir. Bu, bir kapsayıcı gelecekte örneğin yeniden boyutlandırmaya bağlı olarak kaydırılabilir hale gelebilecekse gelecekteki düzen kaydırmamasını azaltmanın ve kullanıcıyı kaydırılabilir alanlara görsel olarak hazırlamanın mükemmel bir yoludur.
overflow: clip
overflow: hidden gibi, overflow: clip içeren içerik de öğenin dolgu kutusuna kırpılır. clip ile hidden arasındaki fark, clip anahtar kelimesinin programatik kaydırma dahil tüm kaydırma işlemlerini de yasaklamasıdır.
overflow: auto
Son olarak, en yaygın olarak kullanılan değer overflow: auto. Bu yöntem, kullanıcı tercihlerine saygı gösterir ve gerekirse kaydırma çubuklarını gösterir ancak varsayılan olarak gizler. Kaydırma sorumluluğunu kullanıcıya ve tarayıcıya bırakır.

Kaydırma ve taşma

Bu overflow davranışlarının çoğu bir kaydırma çubuğu sunar ancak taşma kapsayıcınızda kaydırmayı kontrol etmenize yardımcı olabilecek birkaç özel kaydırma davranışı ve özelliği vardır.

Kaydırma ve erişilebilirlik

Klavye kullanıcısının sekme tuşuyla kutuya gelip ok tuşlarını kullanarak kaydırabilmesi için kaydırılabilir alanın odaklanmayı kabul edebildiğinden emin olmanız önemlidir.

Kaydırma kutusuna odaklanılmasına izin vermek için tabindex="0", aria-labelledby özelliğine sahip bir ad ve uygun bir role özelliği ekleyin. Örneğin:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Ardından, kutunun odakta olduğunu belirtmek için CSS kullanılabilir. outline özelliği, kutunun artık kaydırılabilir olduğuna dair görsel bir ipucu verir.

Adrian Roselli, Erişilebilirliği Zorunlu Kılmak İçin CSS Kullanma başlıklı makalede CSS'nin erişilebilirlik gerilemelerini önlemeye nasıl yardımcı olabileceğini gösterir. Örneğin, yalnızca doğru özellikler kullanılıyorsa kaydırma özelliğini etkinleştirmek ve odak göstergesini eklemek için. Aşağıdaki kurallar, yalnızca tabindex, aria-labelledby ve role özelliğine sahip kutuları kaydırılabilir hale getirir.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Kutu modelinde kaydırma çubuğu konumlandırma

Kaydırma çubukları, dolgu kutusunda yer kaplar ve overlaid değilse inline ise yer için rekabet edebilir. Kutu modeli modülü, bu olası düzen kaydırma kaynağı hakkında daha fazla bilgi sağlar.

root-scroller ve implicit-scroller

Özellikle mobil ve karma uygulamalar için geliştirme yaparken bazı kaydırma çubuklarının yenilemek için çekme davranışına ve diğer özel davranışlara sahip olduğunu fark edebilirsiniz. Bu kaydırma davranışı, kök kaydırma çubuğunda gerçekleşir. Bir sayfada her zaman yalnızca bir kök kaydırma çubuğu bulunur. Varsayılan olarak documentElement sayfanın kök kaydırma çubuğudur. Ancak kök kaydırma çubuğu olarak hangi öğenin kullanılacağını değiştirerek özel davranışları documentElement dışındaki kaydırma çubuklarına uygulayabilirsiniz. Bu yeni kaydırma çubuğunu, gizli kök kaydırma çubuğu olarak adlandırırız.

Kök kaydırma çubuğu oluşturmak için bir kapsayıcıyı sabit olarak konumlandırarak kaydırma çubuğunu öne çıkarma özelliğini kullanabilirsiniz. Bu sayede, kapsayıcının tüm görüntü alanını kaplamasını ve kaydırma çubuğunun z-dizini en üstte olmasını sağlayabilirsiniz. Kök kaydırma çubuğu ile iç içe yerleştirilmiş, gizli kaydırma çubuğu arasındaki farkı buradan görebilirsiniz.

Videoda, gelişmiş kaydırma davranışı olmayan bir örtük kaydırma çubuğunun kaydırılmasına kıyasla
, sıçrama davranışı ve yeni stil özellikleri olan bir kök kaydırma çubuğunun kaydırması gösterilmektedir.

scroll-behavior

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 15.4.

Source

scroll-behavior, öğelere tarayıcı kontrollü kaydırma özelliğini etkinleştirmenize olanak tanır. Bu sayede, .scrollTo() gibi sayfa içi gezinme öğelerinin veya bağlantıların nasıl işleneceğini belirtebilirsiniz.

Bu özellik, özellikle kullanıcı tercihine göre kaydırma davranışını belirtmek için prefers-reduced-motion ile birlikte kullanıldığında yararlıdır.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

Bir modal yer paylaşımının sonuna ulaştıysanız, kaydırmaya devam ettiyseniz ve yer paylaşımının arkasındaki sayfanın hareket etmesine neden olduysanız bu, kaydırma zincirleme veya üst kaydırma kapsayıcısına bulaşma işlemidir. overscroll-behavior özelliği, taşma kaydırma özelliğinin bir üst kapsayıcıya sızmasını (kaydırma zincirleme olarak adlandırılır) önlemenize olanak tanır.

Öğrendiklerinizi test etme

Taşma hakkındaki bilginizi test edin

Metin taşması ve öğe taşması aynı mı?

true
yanlış

overflow mülkü 2 anahtar kelimeyi kabul eder. İlk anahtar kelime hangi eksen içindir?

dikey
yatay

Kaydırma çubukları gösterilirken ve satır içiyken kutu modelinde hangi alanı kaplar?

kenarlık kutusu
kenar boşluğu kutusu
dolgu kutusu
içerik kutusu

İç içe yerleştirilmiş bir örtük kaydırma çubuğunda kaydırma sırasındaki ek momentumu yakalamak için hangi özelliği kullanırsınız?

scroll-hint
overscroll-behavior
scroll-behavior
scroll-padding
overscroll-effect

Kaynaklar

Smashing Magazine'den CSS'de Taşma ve Veri Kaybı