scroll-snap, bir sayfanın içeriğinin belirli aralıklarla belirli hızlarda veya adımlarda kaydırılmasına olanak tanır. Özellikle mobil cihazlarda kullanıcı deneyimini artırmak için son derece yararlıdır. Kullanımı oldukça basittir.

scroll-snap-type

İlk adım, belirli bir kaydırma yöntemi belirlemektir. Bu özellik, scroll-snap özelliğinin belirli bir sayfaya veya elementin nasıl hareket edeceğini belirler. scroll-snap-type, herhangi bir HTML elementine uygulanabilir ve aşağıdaki değerlerden birini alabilir:

• mandatory: Her zaman kaydırmayı kesin olarak tanımlar.
• proximity: Kaydırmayı, elementin ekranın bir kenarına ne kadar yakın olduğuna bağlı olarak kontrol eder.
• none: scroll-snap’i devre dışı bırakır.

Aşağıdaki örnekte, scroll-snap-type özelliği, “mandatory” değeriyle belirlenmiştir:

.container {
  scroll-snap-type: mandatory;
}

scroll-snap-alignment

İkinci adım, öğelerin nasıl hizalanacağını belirlemektir. scroll-snap-alignment, öğelerin hizalanması için beş farklı değere sahiptir:

• start: Elementler sol veya üst kenara hizalanır.
• end: Elementler sağ veya alt kenara hizalanır.
• center: Elementler ortalanır.
• nearest: Elementler , görünür alanda en yakın olan öğeye göre hizalanır.
• none: scroll-snap hizalamayı devre dışı bırakır.

Aşağıdaki örnekte, scroll-snap-alignment özelliği, “center” olarak ayarlanmıştır:

.container {
  scroll-snap-type: mandatory;
  scroll-snap-align: center;
}

Mesela, bir fotoğraf galerisi var. Bu galeri, birkaç resim ve açıklama içeriyor ve kullanıcının kaydırması gerekiyor.

<div class="gallery-container">
  <div class="gallery-item">
    <img src="image1.jpg" alt="image 1">
    <p>Image 1 Description</p>
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="image 2">
    <p>Image 2 Description</p>
  </div>
  <div class="gallery-item">
    <img src="image3.jpg" alt="image 3">
    <p>Image 3 Description</p>
  </div>
</div>

Yukarıdaki HTML kodu, üç adet galeri öğesi içeriyor. scroll-snap özelliğini kullanarak bu öğeleri hizalayabiliriz. Örneğin, aşağıdaki CSS kodu, scroll-snap-type ve scroll-snap-alignment özelliklerini kullanarak galeriyi hizzalayalım:

.gallery-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-snap-align: center;
}
.gallery-item {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

Yukarıdaki kod, y ekseni boyunca scroll-snap-type özelliğini kullanarak kaydırmayı zorunlu kılar. scroll-snap-alignment özelliği de galeri öğelerini ortalamak için kullandık.

Detaylı Bilgi :

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

https://www.w3schools.com/cssref/css_pr_scroll-snap-type.php