CSS scroll-snap-align özelliği

Tanım ve Kullanım

scroll-snap-align Özellik, kaydırmayı durdurduğunuzda elementin odak noktasına yapışacağını belirtir.

Sürekli kaydırma davranışını gerçekleştirmek için, alt elemanlar üzerinde ayarlanmalıdır scroll-snap-align özellik ve ebeveyn eleman üzerinde ayarlanır scroll-snap-type Özellik.}

Örnek

Örnek 1

Kullanıcı kaydırma yaparken durduğunda, en yakın elementi merkeze yapıştırır:

div {
  scroll-snap-align: center;
}

Kişisel olarak deneyin

Örnek 2: Resim kütüphanesi

scroll-snap-align Bu özellik, resim kütüphanesi gezinirken kullanılmaya非常适合。Burada, kaydırma yönlendirme düzeltmesi yataydır, hizalama yapıştırma yöntemi merkezdendir. Kullanıcı kaydırma çubuğunu serbest bırakınca, en yakın resim, kaydırılabilir alanın ortasına yapıştırılır. Bir resmi tıklayın ve ardından sol-sağ ok tuşlarını kullanarak onları gezinmeye çalışın:

#container > img {
  scroll-snap-align: none center;
}
Pekin Rakımcı Wuhan Lale Hangzhou

Kişisel olarak deneyin

jungle mountains man with camera Cinque Terre

Örnek 3: Blok yönlendeki dikey hizalama yapıştırma konumu

Dikey kaydırma yapılırken,scroll-snap-align Özellik, blok yönlendeki elementin başlangıç konumunda da ayarlanabilir:

#container > div {
  scroll-snap-align: start none;
}

Kişisel olarak deneyin

CSS dilbilgisi

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Özellik değeri

Değer Açıklama
none Hiçbir kaydırma yapıştırma etkisi yok. Varsayılan değer.
start X ve y eksenlerinde, elementin başında kaydırma yapıştırma yapılır.
end X ve y eksenlerinde, elementin sonunda kaydırma yapıştırma yapılır.
center X ve y eksenlerinde, elementin merkezinde kaydırma yapıştırma yapılır.
block inline İki değer dilbilgisi. İlk değer, blok yönlendeki yapıştırma yöntemini belirtir, ikinci değer, satır içi yönlendeki yapıştırma yöntemini belirtir.
initial Bu özelliği varsayılan değerine ayarlayın. Kaynakça initial。
inherit Bu özelliği ebeveyn elementinden kalıtsın. Kaynakça inherit。

Teknik ayrıntılar

Varsayılan değer: none
Kalıtım: Hayır
Animasyon yapımı： Desteklenmiyor. Kaynakça:Animasyonla ilgili özellikler。
Sürüm： CSS3
JavaScript dilbilgisi： object.style.scrollSnapAlign="start"

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 68.0 11.0 56.0

İlgili sayfalar

Kaynakça：CSS scroll-snap-type özelliği