Geliştirici testine hazır: Tek eksenli kaydırma kapsayıcıları

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Yayınlanma tarihi: 4 Eylül 2026

"Tek eksenli kaydırma kapsayıcıları" özelliği, CSS overflow özelliğini genişleterek clip ile birlikte kaydırılabilir değerleri (auto, scroll, hidden) destekler. Bu da yalnızca tek eksenli kaydırma kapsayıcılarıyla sonuçlanır (ör. overflow: scroll clip).

Bu değişiklik, eksen başına sabit konumlandırma gibi çok istenen özellikleri kullanıma sunarken kaydırmaya bağlı diğer özelliklerde de ek yan etkiler ortaya çıkarır. Bu olası uyumluluk riskleri nedeniyle, bu özellik kararlı kanallarda kullanıma sunulmadan önce geliştiricilerden web sitelerini test etmelerini ve geri bildirimde bulunmalarını istiyoruz.

Bu özellik, Beta, Yeni Geliştirilenler ve Canary sürüm kanallarında Chrome 153'te geliştirici testine sunulmuştur. Flag etkinleştirmeniz gerekmez.

Bir eksende taşmayı ayarlamayla ilgili tuhaflık

Bu özellik olmadan CSS ile gerçekten tek eksenli bir kaydırma kapsayıcısı oluşturmak mümkün değildi. Bir ekseni kaydırılacak şekilde yapılandırırken diğer ekseni görünür tutmaya çalışırsanız (ör. overflow-x: scroll ayarlanır ve overflow-y: visible ayarlanmaz) tarayıcının stil motoru, görünür ekseni otomatik olarak auto (veya scroll) olarak hesaplamaya zorlar. Bu durum, istemediğiniz halde iki boyutlu bir kaydırılabilir alan oluşturur.

Bu tuhaflık, sabit bir üst satır ve sabit bir ilk sütun içeren bir tablo oluşturmaya çalışırken çok belirgin hale gelir. Aşağıdaki örnekte amaç, ilk sütunun yatay olarak kayan .table-wrapper öğesine, üst satırın ise dokümanın kaydırılabilir alanına yapışmasıdır.

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

/* Scroll horizontally */
.table-wrapper {
  overflow-x: auto;
}

/* Sticky top row */
.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* Sticky first column */
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

Denerseniz bu özelliğin çalışmadığını fark edersiniz. Bunun nedeni, daha önce açıklanan taşma tuhaflığıdır: .table-wrapper, iki boyutlu bir kaydırılabilir alan haline gelir. Bu nedenle, position: sticky her eksen için en yakın üst öğe kaydırıcısını aradığında her iki durumda da sonuç .table-wrapper öğesi olur.

Canlı Demo

Demo Kaydı

Tek eksenli kaydırma kapsayıcıları bu tuhaflığı düzeltir.

Tek eksenli kaydırma kapsayıcılarında, clip kullanarak ikincil eksenin kaydırıcı olmasını açıkça engelleyebilirsiniz. Bu şekilde, position: sticky iki farklı kaydırma kapsayıcısını bağımsız olarak izleyebilir.

Tablo örneğini düzeltmek için yatay kaydırmayı overflow-y: clip ile eşleştirin.

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

İsterseniz overflow kısaltmasını da kullanabilirsiniz:

.table-wrapper {
  overflow: auto clip;
}

Bunu yaptığınızda .table-wrapper yalnızca x ekseni için kaydırma kapsayıcısı olarak işlev görür. Artık sabit üst satır bu alanı atlayacak ve y ekseninde belgenin kaydırma çubuğuna doğru şekilde yapışacak. İlk sütun ise yatay olarak .table-wrapper'ya yapışmaya devam edecek.

Bu gönderiyi desteklenen bir tarayıcıda görüntülüyorsanız aşağıdaki demoda nasıl çalıştığını görebilirsiniz:

Canlı Demo

Demo Kaydı

Etkilenen davranışlar

Tek eksenli kaydırma kapsayıcıları, kaydırma bağlamlarının değerlendirilme ve oluşturulma şeklini değiştirdiğinden, kaydırma kapsayıcılarını kullanan diğer özelliklerde değişiklikler görebilirsiniz. Örneğin:

  • position: sticky: Gösterildiği gibi, öğeler artık tek eksenli kaydırma kapsayıcılarına doğru şekilde yapışacak ve bir eksende overflow: clip ile sınırlanan öğelerin davranışları iyileştirilecek.
  • overscroll-behavior: Bir öğe artık yalnızca tek bir eksende kaydırma kapsayıcısı olabileceğinden overscroll-behavior, kırpılmış eksende tetiklenmeyebilir ve bu durum, özel çekerek yenileme veya geri sekme efektlerini etkileyebilir. Bu davranış değişikliği Firefox ve Safari ile uyumludur.
  • Programatik kaydırma: Tek eksenli kaydırma kapsayıcısında kaydırma API'lerinin (ör. Element.scrollTo()) çağrılması artık programatik kaydırma kısıtlamalarını zorunlu kılıyor. Öğe, kırpma olarak tanımlanan eksen boyunca programatik olarak kaydırmayı reddeder.
  • Izgara ve esnek düzenlerde minimum hücre boyutu: Izgara ve esnek düzendeki kaydırma kapsayıcılarında, hücrelerin kendilerini kullanılabilir alana göre ayarlamasına izin vermek için varsayılan minimum boyut (min-width: auto) normalde yoksayılır. overflow: clip aynı eksende ayarlandığında varsayılan minimum boyut etkili olmaya başlar ve esnek veya ızgara kapsayıcının büyümesine neden olabilir.

Özellik algılama

Tek eksenli kaydırma kapsayıcıları desteğini algılamak için single-axis-scroll-container anahtar kelimesini kullanarak @supports named-feature() kuralını sorgulayın.

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

CSSWG sorunu #13677'de belirtildiği gibi, bu özelliği algılamak için önerilen standart yöntem named-feature(single-axis-scroll-container) kullanmaktır. Yalnızca @supports (overflow: scroll clip) ile yapılan kontrol, yalnızca ayrıştırma kontrolü olduğundan tarayıcının, tek eksenli kaydırma davranışlarını doğru şekilde işleyip işlemediğini algılamaz.

JavaScript'te bu kontrolü yapmak için CSS.supports("named-feature(single-axis-scroll-container)") kullanın.

Geri bildirimlerinizi bekliyoruz

Olası uyumluluk risklerini değerlendirmek için 190 web sitesinde testler yapılmıştır. Bu analize göre, değişikliklerin önemli bir bozulmaya neden olmadığı görülüyor.

Ancak tek eksenli kaydırma kapsayıcıları, kaydırma bağlamlarının değerlendirilme şeklini temelden değiştirdiğinden daha geniş bir kapsamda değerlendirme yapılmaktadır. Bu özellik kararlı sürüme sunulmadan önce uç durumları belirlemeye yardımcı olmak için web sitelerini ve web uygulamalarını kararlı olmayan Chrome kanallarında test etmeniz istenir.

İşler sizin için bozulmaya başlarsa veya beklenmedik kaydırma davranışıyla karşılaşırsanız lütfen Chromium hata bildiriminde bulunun.