Bir başka Safari bekleyen özellikte daha birlikteyiz. Şöyle bir avantajımız var ki Safari kullanıcıları sistemlerini ve dolayısıyla tarayıcılarını hızlı güncellediği için çok beklemiyoruz.
W3C geliştiricileri uzun süre scroll stili ve işlemleriyle alakalı gelişmelere uzak kaldı. Son yıllarda ise bu konuda olabildiğince iyi gelişmeler oldu. Gerek scroll stilini belirlemede gerekse scroll ile yapılan işlemlerde gayet güzel gelişmeler yaşıyoruz.
- Scroll stillendirme işleri
- Scroll davranışını kontol edebilme (overscroll-behavior)
- Yumuşak scroll hareketi imkanı (scroll-behavior)
- Belirli alanlara odaklı scroll geliştirme imkanı (scroll-snap)
- En son scroll konumu zamanına göre işlemler yapabilme imkanı sağlayan (scroll-timeline)
Biz geliştiriciler şimdiye kadar scroll işlemlerimizi alternatif yöntemlerle çözüyorduk. Bu özellikler çıktıktan sonra artık standart ve basit bir şekilde scroll işlemlerimizi yabiliyoruz.
scroll-behavior özelliği sayfa içindeki bir alana bir bağlantı yaptığımızda kullanıcının o alana giderken scroll hareketinin nasıl gerçeleşmesi gerektiğini belirlememiz sağlar.
Yukarıdaki örnekte normal davranışı görebilirsiniz. Yukarıdaki linklere tıkladığımızda sayfa içi ilgili alana giderken direk herhangi bir scroll animasyonu olamadan gider. Aynı şekilde yukarı oka tıklayınca sayfanın en üstüne yine herhangibir scroll animasyonu olmadan gider.
Bu koda sadece bir satır CSS kodu ekleyerek
html {
scroll-behavior: smooth;
}
ilgili alana scroll’un yumuşak bir şekilde gitmesini sağlayabiliyoruz.
Burada dikkat edilmesi gereken bir konu; eğer bu tanımın tüm sayfayı etkilemesini istiyorsak html elementine tanımlamak gerekiyor. Sadece bir kapsayıcının içinde uygulanmasını istiyorsak ilgili kapsayıcıya bu tanımı yapmamız yeterli.
Benzer şekilde yatay scroll işlerinde de bize yumuşak bir geçiş sağlıyor. Örneğin caraousel komponentini sadece CSS ile yapmak mümkün. Süper değil mi? Aha burda yapılmışı da var. Can I create Netflix’s video carousel with CSS only?
Javascript ile bu işi yapmak istediğimizde
window.scrollTo({
top: 1000,
behavior: 'smooth'
})
şeklinde tanımlama yapabiliyoruz.
Bu özelliğin erişilebilirlik kısmı da önemli. prefers-reduced-motion medya sorgusunda şöyle bir tanım yapmak
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Animasyon istemeyen kullanıcılara zorla animasyon uygulamaktan kurtarır bizi.
Tarayıcı desteği konusunda gayet iyi nokta bu özellik. Tarayıcı desteği %95 seviyelerine ulaşmış.
Tarayıcı Desteği
 |
 |
 |
|---|---|---|
| + | + | + |
Mobil Tarayıcılar
|
 |
 |
|---|---|---|
| + | + | + |
Kalın sağlıcakla.
Kaynaklar
- https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
- https://css-tricks.com/almanac/properties/s/scroll-behavior/
- https://www.youtube.com/watch?v=nTtUg8EuJ_8
- https://caniuse.com/?search=scroll-behavior
- https://codyhouse.co/ds/components/info/smooth-scrolling
- https://kilianvalkhof.com/2022/css-html/preventing-smooth-scrolling-with-javascript/
- https://egghead.io/lessons/css-use-css-scroll-behavior-for-animated-anchor-scrolls
- https://coryrylan.com/blog/css-smooth-scroll-behavior
- https://dev.to/pqina/css-smooth-scrolling-4m7f
- https://codepen.io/rolandtoth/pen/eMamVK (CSS ile yukarı butonu yapımı)