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

Sıradaki ders: Özet - Kaydırma hikayesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler