Css Scroll Behavior Kullanımı

Bu yazımızda Css’te scroll behavior özelliği nedir?, nasıl kullanabiliriz? onu öğreneceğiz. Normalde tasarladığımız sayfalarda linklere bir hedef verip o hedefe gidildiğinde, direk atlayarak o hedefe gider. Yani herhangi bir kaydırma animasyonu olmuyor.

Scroll behavior özelliği ile o hedefe giderken animasyonlu gitmesini sağlayabiliriz. İki farklı değer alabilir. Bunlar;

      ► auto : Varsayılan değerdir. Kaydırma efekti olmadan hedefe gider.

      ► smooth : Link ile hedefe giderken kaydırma efekti sağlar.

Örneğin 3 adet div etiketi oluşturalım ve linklere hedef olarak bu div’leri verelim. Linklere tıklayarak div’ler arasında gezinelim.

İlk örneğimizde kaydırma efekti olmayacak ama ikinci örnekte scroll behavior özelliğinin değerini değiştirerek kaydırma efekti verelim.

Kodlarımız şu şekilde,

Sadece scroll behavior özelliğinin değerini smooth yaptığımızda kaydırma efekti uygulanacaktır.

TARAYICI DESTEĞİ

Özellik Chrome IE Firefox Safari Opera
scroll-behavior 61.0 Desteklemiyor 36.0 Desteklemiyor 48.0

Bu tabloda tarayıcıların scroll behavior özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply