Scroll-snap
scroll-snap-type ve scroll-snap-align özelliklerini öğrenirsin.
scroll-snap-type nedir?
scroll-snap-type özelliği, bir kaydırma kapsayıcısında öğelerin kaydırma sonunda nasıl hizalanacağını belirler. İki değer alır: eksen ve davranış. Eksen x, y ya da both olabilir; davranış mandatory (zorunlu) ya da proximity (yakınlık) olur.
Örneğin scroll-snap-type: y mandatory, dikey kaydırmada öğelerin her zaman bir çıtaya oturmasını sağlar. Bu, sunum ya da galeri görünümünde kullanışlıdır.
scroll-snap-stop ile zorla dur
Bazen kullanıcının hızlı kaydırması birden çok çıtayı atlamasına yol açar. scroll-snap-stop: always bildirimi, her çıtada zorla durmayı sağlar; böylece atlama olmaz. Varsayılan değer normal'dır.
Örneğin bir sunumda her slaytın görülmesi önemliyse, her slayt kapsayıcısına scroll-snap-stop: always yazarsın. Hızlı kaydırma bile bir sonraki slaytta durur.
Uygulama Dikey kaydırma çıtaları
İki bölüm yaz. Birincisi, .scroller seçicisi için bir CSS bölümü; bu bölümde scroll-snap-type: y mandatory bildirimi bulunsun. İkincisi, .scroller > section seçicisi için bir CSS bölümü; bu bölümde scroll-snap-align: start bildirimi bulunsun.
Örnek çözümü göster
/* dikey kaydırma çıtaları */
.scroller {
scroll-snap-type: y mandatory;
}
.scroller > section {
scroll-snap-align: start;
}Kendini test et
-
mandatory ile proximity arasındaki fark nedir?
- mandatory yalnızca x ekseninde, proximity yalnızca y ekseninde çalışır
- mandatory öğeyi her zaman çıtaya oturtur, proximity yakınsa oturtur
- mandatory daha hızlı kaydırır, proximity daha yavaş
- mandatory yalnızca masaüstünde, proximity yalnızca mobilde geçerlidir
Cevabı göster
mandatory öğeyi her zaman çıtaya oturtur, proximity yakınsa oturtur — Doğru. mandatory her zaman çıtaya oturtur; proximity yalnızca yakınsa oturtur.
-
Hizalama konumunu yaz
/* galeri ögesi hizalaması */ .gallery > * { scroll-snap-align: ____; }Cevabı göster
/* galeri ögesi hizalaması */ .gallery > * { scroll-snap-align: center; } -
Özellik ile anlamını eşleştir
- scroll-snap-type
- Eksen ve davranışı belirler
- scroll-snap-align
- Ögenin çıtaya hizalanış biçimi
- scroll-snap-stop
- Her çıtada zorla durmayı ayarlar
- scroll-padding
- Çıtalar için iç boşluk ekler