scroll-snap-align
, CSS Scroll Snap Modülünün bir parçasıdır. Kaydırarak yapıştırma, pencere (veya kaydırılabilir bir konteyner) kaydırıldığında görünüm penceresinin konumunu sayfadaki belirli öğelere "kilitlemek" anlamına gelir. Görüntü alanının tepesine yapışan ve sayfayı kaydırmayı durdurmaya zorlayan bir öğenin üstüne bir mıknatıs koymak gibi kaydırarak yapıştırılan bir kapsayıcı düşünün.
scroll-snap-align
kaydırarak yapıştırma kapsayıcısı içinde kaydırarak yapıştırma öğesi için gerekli bir özelliktir. Kaydırmalı kaplar hakkında daha fazla bilgi için scroll-snap-type
almanak girişine bakın. scroll-snap-align
Bir yakalama noktası karşılaşıldığında hizalanmalıdır bir elemanın parçası tarayıcı anlatır: Meli elemanı ek start
, center
ya end
içeren ana kabın scroll-snap-type
özelliği?
Bir elemanın o elemanın başlangıcında yerine oturmasını istiyorsanız, ona şöyle bir scroll-snap-align
değer verin :
/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )
Sözdizimi
scroll-snap-align: ( none | start | end | center )(1,2)
Bu özellik için sırasıyla blok ve satır içi eksenleri temsil eden en fazla 2 değer belirtebilirsiniz. Sadece 1 değer verirseniz, bu değer her iki eksen için kullanılacaktır.
Değerler
scroll-snap-align
aşağıdaki değerleri kabul eder:
none
öğede kaydırarak yapıştırmayı devre dışı bırakırstart
yerine oturtulduğunda öğenin başlangıcını kaydırma kutusunun çıtçıtına hizalarend
yerine oturtulduğunda öğenin ucunu kaydırma kutusunun çıtçıt kısmıyla hizalarcenter
yerine oturtulduğunda öğenin merkezini kaydırma kutusunun çıtçıt kısmıyla hizalar
Misal
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
Krom | Firefox | IE | Kenar | Safari |
---|---|---|---|---|
69 | 68 | 11 * | 79 | 11 |
Mobil / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 81 | 11.0-11.2 |
İlişkili
scroll-snap-type
scroll-margin
scroll-padding
scroll-snap-stop
Kaynaklar
- CSS Scroll Snap W3C Aday Önerisi
- Pratik CSS Kaydırma Yapıştırma
- CSS Kaydırma Ekleme Noktalarına Giriş