CSS'deki scroll-behaviorözellik, tarayıcının kaydırma konumunun yeni bir konuma atlayıp atlamayacağını veya bir kullanıcı bir kaydırma kutusu içindeki bağlantılı bir konumu hedefleyen bir bağlantıyı tıkladığında geçişi sorunsuz şekilde canlandırıp canlandırmayacağını tanımlamamıza olanak tanır.
html ( scroll-behavior: smooth; )Daha Derin Açıklama
Bekle, bekle, bahsettiğimiz bu kayan kutu nedir? Sınırlarını aşan içeriğe sahip bir unsurdur.
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem Kaydırma Kutusu'na bakın.
Uyarı Yukarıdaki demo kutu sabit yüksekliğe sahiptir nasıl 200px? Bu yüksekliği aşan herhangi bir içerik, kutunun sınırları dışındadır ve overflow-y: scrollbu ek içeriği dikey kaydırma ile erişilebilir hale getirmek için ekledik . Kaydırma kutusu ile kastettiğimiz budur.
Şimdi, her bir bağlantının içeriğin üç bölümünü hedeflediği kutunun üst kısmına bir gezinme eklediğimizi varsayalım:
CodePen'de CSS-Tricks (@ css-tricks) ile Nav w / Nav Kalem Kaydırma Kutusuna bakın.
Her bağlantı, kullanıcıyı doğrudan kaydırma kutusunun içindeki farklı içerik bölümlerine götürür. Varsayılan olarak, bu geçiş ani bir sıçramadır.
Bu tür bir sıçrama sarsıcı olabilir. İşte burada scroll-behaviordevreye giriyor ve yumuşak bir kaydırma geçişi ayarlamamıza izin veriyor. Bu tür bir şey scroll-behavioreskiden şık bir Javascript kullanmak için kullanılırdı, ancak tarayıcı desteği geliştiğinde bunu CSS'de yerel olarak yapmamızı sağlayacaktır.
Sözdizimi
.module ( scroll-behavior: ( auto | smooth ); )Değerler
scroll-behaviorÖzelliği ve kapalı kaydırma özelliği düz esas mafsallı iki değeri, kabul eder.
auto(varsayılan): Bu değer, kaydırma kutusu içindeki öğeler arasında ani atlamaya izin verir.smooth: Adına sadık kalarak bu değer, kaydırma kutusu içindeki öğeler arasında yumuşak animasyonlu geçiştir.
Demo
Aşağıdaki demo, bu yazının yazıldığı tarihte yalnızca Chrome 61+, Firefox 36+ ve Opera 48+ üzerinde çalışacaktır.
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan 'kaydırma davranışı` ile Kalem Kaydırma Kutusuna bakın.
Tarayıcı Desteği
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 |
|---|---|---|---|---|
| 61 | 36 | Hayır | 79 | Hayır |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Hayır |
Daha fazla bilgi
- CSSOM Görünüm Modülü: CSS özelliği dahil olmak üzere taslak şartname. Mevcut taslak,
scroll-behaviorbaşka bir şartnameye taşınması için bir öneri içeriyor , bu yüzden bunun nereye düştüğünü görmek ilginç olacak. - Mozilla Developer Network: Spesifikasyon için MDN referansı
- Microsoft Edge Platform Durumu: Şu anda bu özelliğin durumunu Değerlendirme Altında olarak görüntülüyor
- Chrome Platform Durumu: Şu anda bu özelliğin durumunu Geliştirme Aşamasında olarak gösterir ve bir yana diğer platformların durumlarını içerir
- Düzgün Kaydırma Parçacığı: Javascript ve jQuery ile sorunsuz kaydırmayı etkinleştirmek için parçacıklar
- Düzgün Kaydırma ve Erişilebilirlik: Javascript özellikli yumuşak kaydırmanın etkisi hakkında bir CSS-Püf Noktası yazısı