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,

<style>
html {
scroll-behavior: auto;
}
a {
background-color: yellowgreen;
color: #fff;
padding: 10px;
text-decoration: none;
display: inline-block;
}
div {
background-color: cadetblue;
height: 500px;
}
</style>
<div id="box1">
<h2>BÖLÜM 1</h2>
<a href="#box2">Bölüm 2'ye git</a>
<a href="#box3">Bölüm 3'ye git</a>
</div>
<div id="box2">
<h2>BÖLÜM 2</h2>
<a href="#box1">Bölüm 1'ye git</a>
<a href="#box3">Bölüm 3'ye git</a>
</div>
<div id="box3">
<h2>BÖLÜM 3</h2>
<a href="#box1">Bölüm 1'ye git</a>
<a href="#box2">Bölüm 2'ye git</a>
</div>

<style>

html {

scroll-behavior: auto;

}

a {

background-color: yellowgreen;

color: #fff;

padding: 10px;

text-decoration: none;

display: inline-block;

}

div {

background-color: cadetblue;

height: 500px;

}

</style>

<h2>BÖLÜM 1</h2>

<a href="#box2">Bölüm 2'ye git</a>

<a href="#box3">Bölüm 3'ye git</a>

</div>

<h2>BÖLÜM 2</h2>

<a href="#box1">Bölüm 1'ye git</a>

<a href="#box3">Bölüm 3'ye git</a>

</div>

<h2>BÖLÜM 3</h2>

<a href="#box1">Bölüm 1'ye git</a>

<a href="#box2">Bölüm 2'ye git</a>

</div>

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

<style>
html {
scroll-behavior: smooth;
}
</style>

<style>

html {

scroll-behavior: smooth;

}

</style>

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.

Css Scroll Behavior Kullanımı

TARAYICI DESTEĞİ

Yazar Hakkında

Yorum Yazın

TARAYICI DESTEĞİ

Benzer Yazılar

Yazar Hakkında

Yorum Yazın