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 kullanılan kaydırılabilir değerleri (auto, scroll, hidden) destekler. Bu da yalnızca tek eksenli kaydırma kapsayıcılarıyla (ör. overflow: scroll clip) sonuçlanır.

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 potansiyel uyumluluk riskleri nedeniyle, geliştiricilerden bu özellik kararlı kanallarda kullanıma sunulmadan önce web sitelerini test etmelerini ve geri bildirimde bulunmalarını istiyoruz.

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

Bir eksende taşmayı ayarlamayla ilgili tuhaflık

Bu özellik olmadan CSS ile 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 bırakılırsa) tarayıcının stil motoru, görünür ekseni otomatik olarak auto (veya scroll) olarak hesaplamaya zorlar. Bu durum, amaçlamamış olsanız bile 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 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 özelliğiyle ilgili tuhaflıktır: .table-wrapper, iki boyutlu bir kaydırılabilir alan haline gelir. Bu nedenle, position: sticky her eksen için en yakın üst kaydırma öğesini 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ırma özelliğini 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 üstteki sabit satır bu alanı atlayacak ve y ekseninde belgenin kaydırılabilir alanına 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ında doğru şekilde kalacak ve bir eksende overflow: clip ile sınırlandırılmış öğelerin davranışlarını iyileştirecek.
  • 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 bir 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.

Bu kontrolü gerçekleştirmek için JavaScript'te 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ışlarıyla karşılaşırsanız lütfen Chromium hatası bildirin.