CSS Academy · Ders

scroll-snap-type ve scroll-snap-align

CSS kaydırma yakalama özellikleriyle döner galeri ve sayfalama deneyimleri oluşturun.

scroll-snap-type ve scroll-snap-align, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

CSS Kaydırma Yakalama Nedir?

CSS Kaydırma Yakalama, kaydırılabilir kapsayıcıların kaydırma sonrasında belirli konumlara "oturmasını" sağlar ve JavaScript olmadan kontrollü sayfalama ile galeri davranışları oluşturur.

Kapsayıcıda scroll-snap-type

Kaydırılabilir kapsayıcıda yakalamayı etkinleştirin:

  <div class="carousel">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>

scroll-snap-type Değerleri

İki bölümden oluşur:

Eksen: x, y veya both
Katılık: mandatory (her zaman yakalar) veya proximity (yakalama noktasına yaklaşıldığında yakalar)

  <div class="paged">Paged container</div>
  <div class="freeform">Freeform container</div>

Öğelerde scroll-snap-align

Her alt öğenin kapsayıcı içinde nereye oturacağını tanımlayın:

  <div class="carousel-demo">
    <div class="carousel-item">1</div><div class="carousel-item">2</div>
  </div>

Tam Ekran Sayfa Yakalama

Dikey sayfalama kullanan tam ekran bölümü düzeni:

  <div class="sections">
    <div class="section">Section 1</div><div class="section">Section 2</div>
  </div>

Yatay Galeri Yakalama

Yakalamalı yatay kart galerisi:

  <div class="carousel">
    <div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
  </div>

scroll-snap-stop

scroll-snap-stop: always, hızlı kaydırmanın yakalama noktalarını atlamasını önler. Kullanıcı, her kaydırma hareketinde birden fazla öğeyi atlayamaz.

  <div class="slider">
    <div class="slide">1</div><div class="slide">2</div>
  </div>

scroll-snap-margin ve scroll-padding

Öğelerde (scroll-margin) veya kapsayıcıda (scroll-padding) yakalama konumunu uzaklaştırın:

  <div class="carousel">Carousel container</div>

overscroll-behavior

overscroll-behavior: contain, kaydırma zincirlemesini önler — kapsayıcı kaydırma sınırına ulaştığında sayfa da kaydırılmaz:

  <div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

Erişilebilirlik Konuları

Yakalamalı galeriler yine de klavyeyle kullanılabilir olmalıdır. Ok tuşları yakalama noktaları arasında hareket etmelidir. ARIA galeri rollerini ve etiketlerini ekleyin. JavaScript aracılığıyla yapılan kaydırma da aynı yakalama noktalarına uymalıdır.

CSS ve JS Galerileri

CSS kaydırma yakalama, temel galeri gereksinimlerinin çoğunu JavaScript olmadan karşılar: yakalama, kaydırma çubuğunu gizleme ve dolgu hizalaması. Nokta göstergelerine, canlandırılmış geçişlere sahip önceki/sonraki düğmelerine veya karmaşık erişilebilirlik yönetimine ihtiyacınız olduğunda bir JS kitaplığı kullanın.

Hızlı Kontrol

scroll-snap-type değerlerinden hangisi, kapsayıcının arada bir yerde değil, her zaman tam olarak bir yakalama noktasında durmasını sağlar?

Özet

CSS Kaydırma Yakalama, sayfalama ve galeri davranışları oluşturur. Kapsayıcıda scroll-snap-type: x mandatory, öğelerde ise scroll-snap-align: start ayarını yapın. Atlamayı önlemek için scroll-snap-stop: always kullanın. Kaydırma zincirlemesini önlemek için overscroll-behavior: contain ile birleştirin. Temiz bir görünüm için kaydırma çubuklarını scrollbar-width: none ile gizleyin.

Sıkça Sorulan Sorular

“scroll-snap-type ve scroll-snap-align” dersi ücretsiz mi?

Evet — “scroll-snap-type ve scroll-snap-align” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“scroll-snap-type ve scroll-snap-align” dersinde ne öğreneceğim?

CSS kaydırma yakalama özellikleriyle döner galeri ve sayfalama deneyimleri oluşturun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“scroll-snap-type ve scroll-snap-align” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

overflow: hidden scroll auto clip
scroll-behavior: smooth
scroll-snap-type ve scroll-snap-align
::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme

← CSS Academy Sayfasına Dön