CSS scroll-snap-type özelliği

Tanım ve Kullanım

scroll-snap-type Özellik, birimi durdurduğunuzda, elementin odaklanmaya nasıl çarpacağını ve çarpma yönünü belirler.

Kaydırma yapıştırma davranışını gerçekleştirmek için, ebeveyn elemanda bu özelliği ayarlamak zorundasınız. scroll-snap-type Özelliği, ve alt elemanlarda scroll-snap-align Özellik.

Örnek

Örnek 1

X ekseninde kaydırma yapıştırma fonksiyonunu ayarlar:

#container {
  scroll-snap-type: x mandatory;
}

Kişisel Olarak Deneyin

Örnek 2: X Ekseninde ve Y Ekseninde Yapıştırma Davranışı

X ekseninde ve y ekseninde scroll-snap-type Özellik:

#container > div {
  scroll-snap-type: both mandatory;
}





Kişisel Olarak Deneyin

Örnek 3: Yakınlık Davranışı İle Yapıştırma

X ekseninde ve y ekseninde yakınlık davranışı olan scroll-snap-type Özellik. Bu özellik değeri kullanılırken, kaydırma işlemi iki elemanın ortasında durduğunda yapıştırma yapılmaz:

#container > div {
  scroll-snap-type: both proximity;
}





Kişisel Olarak Deneyin

CSS Dilbilgisi

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Özellik Değeri

Değer Açıklama
none Kaydırma yapıştırma etkisi yoktur. Varsayılan değer.
x X ekseninde kaydırma yapıştırma etkisini ayarlar.
y Y ekseninde kaydırma yapıştırma etkisini ayarlar.
block Bloklu yönde kaydırma yapıştırma etkisini ayarlar.
inline Satır içi yönde kaydırma yapıştırma etkisini ayarlar.
both X ekseninde ve y ekseninde kaydırma yapıştırma etkisini ayarlar.
mandatory Kaydırma işlemi tamamlandıktan sonra, kaydırma, otomatik olarak yapıştırma noktasına taşınır.
proximity

mandatory ile benzer, ancak ondan daha az katıdır.

Kaydırma işlemi tamamlandıktan sonra, kaydırma, otomatik olarak yapıştırma noktasına taşınır, ancak yapıştırma noktaları arasında bir bölgeye yapıştırma etkisi yoktur.

Tarayıcı parametrelerine bağlıdır.
initial Bu özelliği, varsayılan değerine ayarlar. Bakınız initial.
inherit Bu özelliği, ebeveyn elemanından miras alır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer: none
Miras Yönlendirme: Hayır
Animasyon Yapımı: Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollSnapType="x mandatory"

Tarayıcı Desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

İlgili sayfalar

Referans:CSS scroll-snap-align özelliği