Css Scroll Behavior Kullanımı

Merhaba Arkadaşlar,
Bu makalede 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.

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
scroll-behavior61.0Desteklemiyor36.0Desteklemiyor48.0

Bu resimde 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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 40 – User Select Kullanımı

Sonraki : Css Dersleri 42 – İmport Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +