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.

İ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.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.