Scroll function
scroll() fonksiyonunu öğrenirsin.
scroll() işlevinin bağımsız değişkenleri
scroll() işlevi iki bağımsız değişken alır: eksen (axis) ve kaynak (source). Eksen, kaydırma yönünü belirtir; block (dikey, varsayılan) ya da inline (yatay) olabilir.
Kaynak, hangi kapsayıcının kaydırmasının kullanılacağını söyler; nearest (varsayılan) ya da root olabilir. Örneğin scroll(block nearest) ile scroll() aynıdır.
Kaynak: nearest ve root
source bağımsız değişkeni, hangi kaydırılabilir öğenin zaman akışını süreceğini seçer. nearest (varsayılan), animasyonlu öğeye en yakın kaydırılabilir atayı kullanır; iç içe kaydırma alanları için uygundur.
root ise belgenin görünüm alanını (ana sayfa kaydırması) kullanır. Tüm sayfanın kaydırmasıyla hareket eden bir ilerleme çubuğu için scroll(root) yazarsın.
Uygulama Sayfa kökü kaydırmasıyla animasyon
Bir CSS bölümü yaz. Bu bölümde animation-timeline: scroll(root block) bildirimi bulunsun. scroll() işlevinin içine hem root hem de block bağımsız değişkenleri yazılmalı; sıra önemli değil.
Örnek çözümü göster
/* sayfa kökü kaydırması */
.progress {
animation-timeline: scroll(root block);
}Kendini test et
-
scroll() işlevinin iki bağımsız değişkeni nedir?
- axis ve duration
- axis ve source
- axis ve offset
- source ve delay
Cevabı göster
axis ve source — Doğru. scroll() işlevi axis ve source olmak üzere iki bağımsız değişken alır.
-
Blok eksenini açıkça yaz
/* dikey blok ekseni */ animation-timeline: scroll(____ nearest);Cevabı göster
/* dikey blok ekseni */ animation-timeline: scroll(block nearest); -
Bağımsız değişkeni anlamıyla eşleştir
- block
- Dikey (blok) eksen
- inline
- Yatay (satır içi) eksen
- nearest
- En yakın kaydırılabilir ata
- root
- Belge kökü, görünüm alanı