v2.5.2
Giriş yap

Table X Scroll ile Position Sticky Sorunsalı

alico
466 defa görüntülendi

Bir çalışmanız var body scroll-x overflow hidden moduna aldınız. Bu çalışmanın bir sayfasında, body'nin bir noktasında tablenız var. Bu table thead > th etiketleri position sticky ile top değeri verdiğiniz o noktaya geldiğinde sabitlediniz.

Güzel. Şimdi birde bu table minumun-width tanımladınığınızı düşünün. Şundan daha fazla küçülmesin istediniz. Ekran o aralıktan büyük olursa diye en pratik çözüm ile yatay eksende kaydırmak için table içine aldığımız div'e scroll-x veriyoruz dimi. İşte bu noktada bütün günümü öldüren sorunsalın içine düştüm.

https://codepen.io/alico/pen/bGrZYGq?editors=1100

Şimdi sorunu dile dökmek zor, hemen aklınıza şu response göre td kapa gibi methodlar gelmesin, bunlar benim kullandığım arayüzde sunumumda bir çözüm içermez. Ben mevcut teknik çözümlenebiliyor ise neyi kaçırdığımı görmek istiyorum.

Yine sabit bir table alıp kendi içinde yatayda scroll edebilir stiky leri tutabiliriz ama örnekte göreceğiniz senoryodaki gibi handikaplar oluşuyor.

Örnek linki açın, x ekseninde scroll ettiğinizde kayacaktır Yukarı çektiğinizde ise stikcy bozduğunu göreceksiniz

Satır 17 'ye gelin .tr-table {overflow-x:scroll } kaldırın yatay eksende kayma kapanacaktır ve yukarı kaydırdığınızda stick olan th lar çalışacaktır.

Kapsayıcı element yani .tr-table'a pencere yüksekliği istiyor bunu verince devreye giriyor ama saçma hadi verdik diyelim 100vh bu sefer kapsayıcı dikey scroll da açılıyor overflow-y değerine scroll vermediğimiz halde. Ve sayfada iki tek dikey scroll işleyecek iken iki scroll işliyor.

Daha pek çok garip durum oluyor.

Teşekkürler.

Cevap yaz
Cevaplar (2)
alico
1124 gün önce

Bu kaynakların üstünden geçmiştim bakınırken ama yaşadığım sıkıntıyı tam çözmüyordu atladığım bir şey olabilirmi diye inceleyip tekrar döneceğim, teşekkürler.

tayfunerbilen
1129 gün önce

tam olarak problemini tarif eden ve çözümünü üreten bir makale var:
https://uxdesign.cc/position-stuck-96c9f55d9526

ayrıca problemin neden olduğuyla ilgileniyorsan basit bir açıklama:
https://stackoverflow.com/questions/37752448/css-position-sticky-and-overflow#answers-header

sonuç olarak ya belli bir yüksekliğin olmalı ya da birkaç javascript trick ihtiyacın olacak bunu yapabilmek için