scroll-behavior

26 Eylül 2022

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

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.

Kaynaklar

:focus-within tanımı

:focus-within sözde sınıfı Devamını oku

CSS ile dosya yükleme butonuna stil verme

11 October 2022 tarihinde yayınlandı.

Çalışma Ortamımda Ergonomik Güncellemeler

22 September 2022 tarihinde yayınlandı.