Tailwind CSS Overflow, Overscroll ve Scroll Snap Sınıfları

Taşma sınıfları

auto ile scroll arasındaki fark yalnızca çubuğun ne zaman göründüğüdür. Resmî overflow sayfası, overflow-scroll sınıfının çubukları her zaman göstermeye çalıştığını, ancak macOS gibi bazı işletim sistemlerinin gereksiz çubukları bu ayardan bağımsız olarak gizlediğini not eder. Pratikte çoğu durumda overflow-auto doğru seçimdir; içerik sığdığında boş bir çubuk alanı kalmaz.

<div class="overflow-hidden rounded-lg">
  <img src="kapak.jpg" alt="">
</div>
<div class="overflow-x-auto">
  <table class="w-max">...</table>
</div>
<div class="max-h-64 overflow-y-auto overscroll-contain">Uzun liste</div>

@layer utilities {
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .w-max {
    width: max-content;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overscroll-contain {
    overscroll-behavior: contain;
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
}

Bu üç kalıp gündelik işlerin büyük kısmını karşılar. İlkinde overflow-hidden, köşeleri rounded-lg ile yuvarlatılmış bir kartın içindeki görselin köşelerden taşmasını keser; köşe yuvarlatma sınıfları border ve rounded yazısında. İkincisinde geniş bir tablo dar ekranda sayfayı yatayda kaydırmak yerine kendi kapsayıcısı içinde kayar; w-max tablonun kendi doğal genişliğinde kalmasını sağlar. Üçüncüsünde max-h-64 listeye 16rem üst sınır koyar ve overflow-y-auto sınırı aşan kısmı kaydırılabilir yapar. Üst sınır olmadan bu sınıf işe yaramaz, çünkü kutu içerikle birlikte uzar ve taşacak bir şey kalmaz.

overflow-hidden mi, overflow-clip mi?

İkisi de taşan içeriği keser ve ekranda çoğu zaman aynı görünür. Fark, kutunun bir kaydırma kapsayıcısı olup olmadığındadır. CSS kurallarına göre overflow: hidden verilen bir kutu kullanıcıya kaydırma çubuğu göstermez ama yine de kaydırma kapsayıcısıdır; JavaScript ile içeriği programlı olarak kaydırılabilir ve bir sticky çocuk ona göre yapışır. overflow: clip ise kutuyu hiç kaydırma kapsayıcısı yapmaz, içeriği yalnızca keser. Tailwind açısından iki sınıf da tek satır CSS üretir; canonicalize komutu overflow-clip sınıfına dokunmadı, yani ikisi de geçerli ve ayrı sınıflardır. Bir kartın köşelerini kırpmak gibi yalnızca görsel bir kesme istiyorsanız ve kapsayıcının içinde sticky bir öğe yoksa iki sınıf da iş görür; içeride sticky bir başlık varsa overflow-hidden o başlığın yapışacağı alanı değiştirir.

Taşmayı ekran boyutuna göre değiştirmek

Taşma sınıfları da responsive öneklerle birleşir. Resmî sayfadaki örnek overflow-auto md:overflow-scroll yazımıdır. Daha sık karşılaşılan bir senaryo, mobilde yatay kayan bir sekme listesinin geniş ekranda normal akışa dönmesidir. Aşağıdaki derlemede bunu, tam ekran bölümlerin dikey olarak yerine oturduğu bir sayfa kaydırmasıyla birlikte görüyorsunuz:

<div class="overflow-x-auto md:overflow-visible">
  <ul class="flex gap-2">...</ul>
</div>
<div class="h-dvh snap-y snap-mandatory overflow-y-auto">
  <section class="h-dvh snap-center snap-always">Bölüm 1</section>
  <section class="h-dvh snap-center snap-always">Bölüm 2</section>
</div>

@layer utilities {
  .flex {
    display: flex;
  }
  .h-dvh {
    height: 100dvh;
  }
  .snap-y {
    scroll-snap-type: y var(--tw-scroll-snap-strictness);
  }
  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }
  .snap-center {
    scroll-snap-align: center;
  }
  .snap-always {
    scroll-snap-stop: always;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  @media (width >= 48rem) {
    .md\:overflow-visible {
      overflow: visible;
    }
  }
}

İlk kapsayıcıda dikkat edilecek ayrıntı, önekli sınıfın kısaltma özellik yazmasıdır: md:overflow-visible yalnızca yatay ekseni değil, overflow özelliğinin tamamını visible yapar ve orta ekrandan itibaren overflow-x-auto etkisini ortadan kaldırır. Sonraki kural olduğu için kazanır. İkinci kapsayıcı ise görünüm alanı yüksekliğinde dikey bir kaydırma alanıdır; her bölüm de aynı yükseklikte olduğu için kaydırma bittiğinde bir bölüm ekranı tam olarak doldurur. snap-always sınıfı scroll-snap-stop: always yazar; CSS kurallarına göre bu değer, hızlı bir kaydırma hareketinde bile tarayıcının bu yakalama noktasını atlamamasını ister. Varsayılan davranışa dönmek için snap-normal vardır.

İç içe kaydırma: overscroll-contain ve overscroll-none

Sayfanın içinde kendi kaydırma alanı olan bir liste ya da sohbet penceresi düşünün. Kullanıcı listenin sonuna geldiğinde kaydırmaya devam ederse, tarayıcı varsayılan olarak kaydırmayı üst sayfaya devreder ve tüm sayfa kaymaya başlar. Resmî overscroll-behavior sayfasına göre overscroll-contain bu devri engeller ama destekleyen işletim sistemlerinde sınırda görülen "esneme" efektini korur. overscroll-none hem devri hem esneme efektini kaldırır. overscroll-auto ise varsayılan davranışa döner ve kullanıcının sınıra gelince üst alanı kaydırmaya devam etmesine izin verir. Yalnızca tek eksen için overscroll-x-* ve overscroll-y-* biçimleri de derlenir; overscroll-y-contain sınıfı overscroll-behavior-y: contain üretti.

Bu sınıflar en çok modal pencerelerde, yan çekmecelerde ve uzun açılır listelerde işe yarar. Yukarıdaki örnekteki max-h-64 overflow-y-auto overscroll-contain üçlüsü, sayfanın ortasında kendi içinde kayan ama sonuna gelindiğinde arkadaki sayfayı sürüklemeyen bir liste için tam bir tariftir. Responsive önekle de birleşir; resmî sayfadaki overscroll-auto md:overscroll-contain yazımı, devri yalnızca orta ekrandan itibaren engeller. Hangi değerin doğru olduğu, kullanıcının o alanın sonuna geldiğinde sayfanın devam etmesini bekleyip beklemediğine bağlıdır.

Yumuşak kaydırma: scroll-smooth

scroll-smooth sınıfı scroll-behavior: smooth, scroll-auto ise scroll-behavior: auto yazar. Resmî sayfa bu sınıfı html elemanında gösterir: sayfa içi bir bağlantıya tıklandığında tarayıcı hedefe anında atlamak yerine kayarak gider. Resmî sayfanın önemli bir notu, bu ayarın yalnızca tarayıcının tetiklediği kaydırma olaylarını etkilediğidir; kullanıcının fare tekerleği veya dokunmatik hareketleriyle yaptığı kaydırmanın hissini değiştirmez. Önekle de birleşir: resmî örnekteki scroll-smooth md:scroll-auto yazımı yumuşak kaydırmayı orta ekrandan itibaren kapatır.

<html class="scroll-smooth scroll-pt-16">
  <header class="sticky top-0 h-16">Menü</header>
  <h2 id="fiyatlar" class="scroll-mt-4">Fiyatlar</h2>
</html>

@layer utilities {
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: 0px;
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .scroll-mt-4 {
    scroll-margin-top: calc(var(--spacing) * 4);
  }
  .scroll-pt-16 {
    scroll-padding-top: calc(var(--spacing) * 16);
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
}

Bu örnekte yumuşak kaydırmaya bir de kaydırma boşluğu ekledik. Resmî belgeler scroll-p* ve scroll-m* sınıflarını scroll snap bağlamında anlatır, ancak ürettikleri CSS özellikleri (scroll-padding-top, scroll-margin-top) CSS'te bağlantıya atlama gibi programlı kaydırmalarda da kullanılır. Burada kaydırma kapsayıcısı olan html elemanına scroll-pt-16 vererek üstteki 4rem'lik alanı, yani yapışkan başlığın kapladığı şeridi "görünür alanın dışı" saydık. Böylece #fiyatlar bağlantısına tıklandığında başlık sticky menünün altında kalmaz. Hedefin kendisine verilen scroll-mt-4 ise o başlık için fazladan 1rem pay bırakır. Yapışkan başlığın kendisi sayfa düzeni yazısında.

Scroll snap: kaydırınca yerine oturan şeritler

Scroll snap, kaydırma bittiğinde içeriğin belirli noktalara oturmasını sağlar. Tailwind'de iki tarafı vardır: kapsayıcıya eksen ve kararlılık, çocuklara hizalama verilir. Resmî scroll-snap-type sayfası açıkça uyarır: snap'in çalışması için çocuklarda da hizalama sınıfı olmalıdır. Aşağıdaki şeritte her slayt kapsayıcının yüzde sekseni genişliğinde, kaydırma bittiğinde de bir slaytın başlangıcı kapsayıcının başlangıcına oturuyor:

<div class="flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-px-6 px-6">
  <div class="w-4/5 shrink-0 snap-start">Slayt 1</div>
  <div class="w-4/5 shrink-0 snap-start">Slayt 2</div>
  <div class="w-4/5 shrink-0 snap-start">Slayt 3</div>
</div>

@layer utilities {
  .flex {
    display: flex;
  }
  .w-4\/5 {
    width: calc(4 / 5 * 100%);
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }
  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }
  .snap-start {
    scroll-snap-align: start;
  }
  .scroll-px-6 {
    scroll-padding-inline: calc(var(--spacing) * 6);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
}
@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}

Derlenen CSS'te snap-x sınıfının kararlılığı bir değişkenden aldığını görüyorsunuz: scroll-snap-type: x var(--tw-scroll-snap-strictness). Bu değişkenin başlangıç değeri proximity olarak tanımlanmıştır. Yani yalnızca snap-x yazarsanız tarayıcı içeriği yalnızca bir yakalama noktasına yakınsa oturtur; snap-mandatory değişkeni mandatory yapar ve resmî sayfanın ifadesiyle kapsayıcının her zaman bir yakalama noktasında durmasını zorlar. snap-proximity sınıfı varsayılanı açıkça yazmak için vardır.

Çocuklardaki snap-start slaytın başlangıç kenarını hizalar; snap-center ortasını, snap-end bitişini, snap-align-none ise hizalamayı kaldırır. shrink-0 flex öğelerinin kapsayıcıya sığmak için küçülmesini engeller; o olmadan w-4/5 genişlikteki üç slayt sığmak için daralır ve kaydıracak bir şey kalmayabilir (flex öğesi sınıfları flex-1, grow ve shrink yazısında). Kapsayıcıdaki px-6 ilk ve son slayta kenarlardan nefes payı verir; scroll-px-6 ise yakalama noktasını aynı miktarda içeri kaydırır, böylece oturan slayt kapsayıcının kenarına yapışmaz, padding'in hemen içinde durur.

scroll-p* ve scroll-m* sınıfları padding ve margin ile aynı ön ekleri kullanır (scroll-pt, scroll-px, scroll-ms, scroll-mbs gibi) ve resmî sayfalara göre aynı --spacing ölçeğinden beslenir. Fark, nereye yazıldıklarıdır: scroll padding kapsayıcıya, scroll margin çocuğa verilir. Scroll margin negatif de olabilir (-scroll-ml-6 derlendiğinde scroll-margin-left: calc(var(--spacing) * -6) üretti); scroll padding ise negatif olamaz; CLI -scroll-pl-6 için hiçbir kural üretmedi. Ölçeğin kendisi padding ve margin yazısında.

Sık yapılan hatalar

• Yüksekliksiz overflow-y-auto: kutunun bir üst sınırı (max-h-* veya h-*) yoksa içerik kutuyu uzatır ve kaydırma çubuğu çıkmaz.
• Yalnızca kapsayıcıya snap vermek: snap-x tek başına yetmez; çocuklara snap-start, snap-center veya snap-end ekleyin.
• Kayan şeritte shrink-0 unutmak: flex öğeleri sığmak için küçülür ve yatay kaydırma oluşmaz.
• Her şeyi overflow-hidden ile çözmek: taşan içerik görünmez olur ama kaybolmaz; erişilemeyen metin ya da kesilen odak halkası gibi yeni sorunlar çıkar. Metni tek satırda kesmek istiyorsanız truncate ve line-clamp daha uygun bir araçtır.
• scroll-smooth ile her şeyin yumuşayacağını sanmak: resmî belgeye göre yalnızca tarayıcının tetiklediği kaydırmaları etkiler.

Sık Sorulan Sorular

overflow-auto ile overflow-scroll farkı nedir?

overflow-auto kaydırma çubuğunu yalnızca içerik taştığında gösterir; overflow-scroll ise içerik sığsa bile çubukları göstermeye çalışır. Resmî belge, bazı işletim sistemlerinin gereksiz çubukları bu ayardan bağımsız gizlediğini belirtir.

Modal açıkken arkadaki sayfanın kaymasını nasıl engellerim?

Modalın kaydırılabilir içeriğine overscroll-contain vermek, içerik sonuna gelindiğinde kaydırmanın arkadaki sayfaya geçmesini engeller. Arkadaki sayfanın hiç kaymaması isteniyorsa genellikle body elemanına geçici olarak overflow-hidden eklenir; bunu açıp kapatmak JavaScript ile yapılır.

overflow-x-auto verdim ama sayfa hâlâ yatayda kayıyor, neden?

Taşan eleman büyük ihtimalle o kapsayıcının dışındadır. Sabit genişlik verilmiş bir blok (w-96 gibi), kırılmayan uzun bir bağlantı ya da w-screen kullanan bir eleman sayfanın genişliğini aşabilir. Tarayıcının geliştirici araçlarında sayfadan geniş olan elemanı bulun; çözüm çoğu zaman sabit genişlik yerine w-full max-w-96 yazmak ya da taşan içeriği kendi overflow-x-auto kapsayıcısına almaktır.

Kaydırmayı yalnızca bir eksende nasıl açarım?

Eksen sınıflarını ayrı ayrı yazın: overflow-x-auto overflow-y-hidden yatayda gerektiğinde kaydırır, dikeyde taşanı keser. Bu sınıflar overflow-x ve overflow-y özelliklerini ayrı ayrı yazdığı için birbirini ezmez. Ancak bunların ardından önekli bir overflow-* kısaltması geliyorsa, örnekte gördüğünüz gibi iki ekseni birden değiştirir.

Scroll snap neden çalışmıyor?

Üç şeyi kontrol edin: kapsayıcının gerçekten kaydığı (overflow-x-auto ve taşan içerik), kapsayıcıda snap-x veya snap-y bulunduğu ve çocuklarda bir hizalama sınıfı olduğu. Yalnızca snap-x yazdıysanız kararlılık varsayılan proximity değerindedir; her kaydırmada oturmasını istiyorsanız snap-mandatory ekleyin.

Sayfa içi bağlantı başlığı sticky menünün altında kalıyor, ne yapmalıyım?

Kaydırma kapsayıcısına (çoğunlukla html) menünün yüksekliği kadar scroll-pt-* verin ya da hedef başlığa scroll-mt-* ekleyin. Yukarıdaki örnekte 4rem yüksekliğindeki menü için scroll-pt-16 kullandık.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind öğrenme rehberi · width, height ve size · flex-1, grow ve shrink · truncate ve line-clamp · position ve inset · sayfa düzeni