Bu overflow-anchorözellik, içerik tam olarak yüklendikten sonra kullanıcının konumunu değiştirmeden içeriğin kullanıcının mevcut DOM konumunun yukarısına yüklenmesine izin vermeyi amaçlayan bir tarayıcı özelliği olan Kaydırma Bağlantısını devre dışı bırakmamızı sağlar.
Neden İhtiyacımız Var
Scroll Anchoring, DOM tam olarak yüklenmeden önce bir web sayfasını aşağı kaydırabileceğiniz ve mevcut konumunuzun üzerine yüklenen herhangi bir öğe sizi sayfanın daha da aşağıya ittiği yaygın bir durumu engellemeye çalışan bir tarayıcı özelliğidir.
Bunun neden olacağı mantıklı. Öğelere boyut (ör. width), Şekil (ör. transform) Ve konum (ör margin. ) Veren öğelere uyguladığımız CSS özellikleri vardır . Sayfayı aşağı kaydırdığımız zamana kadar bu öğeler yüklenmemişse, DOM, mevcut görüntü alanımızın dışında olsalar bile onları yüklemeye devam edecek ve yeni yüklenen öğelere yer açmak için fiziksel olarak genişleyecektir. DOM büyüdükçe, sayfadaki konumumuz bu öğeleri barındıracak şekilde değişir.
Kaydırma Bağlantısı, geçerli konumun üzerindeki DOM'da değişiklikler yapılırken kullanıcının sayfadaki konumunu kilitleyerek bu "atlama" deneyimini önler. Bu, kullanıcının, DOM'a yeni öğeler yüklenirken bile sayfanın neresinde oldukları yerde sabit kalmasını sağlar.
Bu overflow-anchorözellik, öğeler yüklenirken içeriğin yeniden akmasına izin vermenin tercih edilmesi durumunda Kaydırma Bağlama özelliğini devre dışı bırakmamızı sağlar.
Sözdizimi
article ( overflow-anchor: (auto | none ); )Değerler
overflow-anchorMülkiyet özellik etkin olup olmadığını, esasen geçiş iki değeri kabul eder.
auto(varsayılan): Uygulandığı sayfanın veya öğenin kısmında kaydırarak tutturmayı etkinleştirir.none: Bir web sayfasının bir kısmında veya tamamında kaydırma sabitlemeyi devre dışı bırakır veya DOM'nin bazı kısımlarını bağlantılı olandan çıkararak içeriğin yeniden akışına izin verir.
Muhtemelen bodybunu öğesine uygularsınız , ancak kapsamını herhangi bir seçiciye uygulayabilirsiniz ve bu öğe kaydırılırsa etkili olur.
Demo
Bu demoda, kutulardan birini kaydırdığınız anda, o div'in üstüne bir grup yeşil kutu ekleyecektir. Normalde bu, içeriği hemen aşağı iter, potansiyel olarak büyük bir dikkat dağıtıcıdır ve metindeki yerinizi kaybedersiniz. İle overflow-anchor: auto;kaydırma yeri korunur. overflow-anchor: none;yeni eklenen div'lerin kaydırma konumunu etkilemesine izin verir.
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Kalem taşma çapasını görün.
Oldukça faydalı olabilecek başka bir şey de, bir öğenin kaydırma konumunu alta sabitlemektir. Örneğin, yeni mesajların en alttaki DOM'a eklendiği ve kaydırma konumunun tüm yeni mesajları gösteren altta kalmasını istediğiniz bir sohbet uygulaması:
Kalem görün
Chris Coyier (@chriscoyier) tarafından kaydırma çapa ile kaydırma "altta Stay"
CodePen üzerinde.
Tarayıcı Desteği
Bu yazı itibariyle, overflow-anchormevcut bir W3C Standardı değildir, ancak önerilen spesifikasyonun taslak raporu okunabilir ve Sürüm 56'dan beri Chrome tarafından benimsenmiştir. Mozilla, Firefox'ta benzer bir özelliği değerlendirmektedir. Daha fazla tarayıcı Scroll Anchoring özelliğini benimsedikçe, overflow-anchorbu özelliği devre dışı bırakmak için açık bir kontrol sağladığı için daha fazla tarayıcı desteği görmeyi bekleyebiliriz .
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 56 | 66 | Hayır | 79 | Hayır |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Hayır |
Daha fazla bilgi
- Scroll Anchoring: Scroll Anchoring spesifikasyonunun önerilen taslağı
- Chromium Blog: Chrome'un Scroll Anchoring ve CSS özelliğini Sürüm 56'ya dahil ettiğini duyuran blog yayını
- Bugzilla Bilet # 43114: Mülkü Firefox'a dahil etmek için bilet açın