CSS Scroll Snaps ile Kullanıcı Deneyimini Nasıl Geliştiririz?

5 min readJan 10, 2024

Günümüzde, kullanıcıların sadece içeriğe değil, aynı zamanda web sitelerinin sunum şekline de büyük önem verdiği bir dönemdeyiz. Bu bağlamda, CSS Scroll Snaps, web sitelerinin kullanıcı deneyimini temelden dönüştüren bir yenilik olarak öne çıkıyor. Etkileyici görsel geçişler ve akıcı kaydırma deneyimi sağlayan bu özellik, kullanıcıların sitenizle etkileşimini zenginleştirmenin anahtarıdır.

Scroll Snap, CSS’in bir özelliği olarak, web sayfalarında kaydırma işleminin belirli noktalarda durmasını sağlar. Kullanıcılar bir web sayfasında kaydırma yaptığında, bu özellik sayesinde sayfa, geliştiricinin belirlediği belirli noktalarda durur. Bu “snap noktaları” olarak adlandırılır ve kaydırmanın belirlenen konumlarda hizalanmasını sağlar. CSS Scroll Snap, web geliştiricilerine her bir öğeyi belirli snap noktalarına atama yeteneği vererek, kaydırmanın bu noktalarda sonlanmasını garanti eder.

Özellikler

CSS Scroll Snaps’ın iki temel özelliği vardır: scroll-snap-type ve scroll-snap-align.

Scroll-snap-type Özelliği

scroll-snap-type, genellikle web sayfasının ana veya container elementi içinde belirtilir ve sayfanın kaydırma davranışını tanımlar. Bu özellik, kaydırma yönünü ve davranışını belirleyen iki değeri içerir.

.container {
  scroll-snap-type: x/y/both none/mandatory/proximity;
}

Kaydırma Yönü

Kaydırma yönü, scroll-snap-type özelliğinin hangi yönde uygulanacağını tanımlar. Bu, üç olası değer içerir: X, Y ve Both.

X değeri: Bu değer, scroll-snap-type özelliğini yatay yönde uygular.
Y değeri: Bu değer, scroll-snap-type özelliğini dikey yönde uygular.
Both değeri: Bu değer, scroll-snap-type özelliğini hem yatay hem de dikey yönde uygular.

Diğer olası kaydırma yönü değerleri şunları içerir:

Inline değeri: scroll-snap-type özelliğini satır içi yönde uygular.
Block değeri: scroll-snap-type özelliğini blok yönde uygular.

Kaydırma Davranışı

Kaydırma davranışı, web sayfasına uygulanacak kaydırma tipini tanımlar ve üç değere sahiptir: None, Mandatory ve Proximity.

None değeri: Bu, scroll-snap-type özelliğinin varsayılan değeridir ve bir web sayfasında herhangi bir kaydırma davranışının uygulanmamasını belirtir.
Mandatory değeri: Zorunlu değer, kullanıcının kaydırma konumundan bağımsız olarak öğelerin otomatik olarak kaydırma noktalarına alınmasını sağlar. Bu, çok katı bir scroll-snap-type özelliği değeridir.
Proximity değeri: Yakınlık değeri, zorunlu değerle benzer işlevleri taşır. Ancak, daha az katı bir scroll-snap-type özelliği değeridir.

Scroll-snap-align Özelliği

scroll-snap-align, kaydırma container içindeki elemanlara uygulanan CSS özelliğidir ve her öğenin belirli snap noktaları içinde nasıl hizalanacağını belirler.

.element {
  scroll-snap-align: none/start/center/end;
}

Bu özellik, dört olası değere sahiptir:

none: Bu, scroll-snap-align özelliğinin varsayılan değeridir ve eleman(lar)a herhangi bir kaydırma etkisinin uygulanmamasını belirtir.
start: Bu değer, yatay ve dikey kaydırmalarda öğenin başlangıcında kaydırma etkisini uygular.
center: Bu değer, öğenin merkezinde kaydırma etkisini uygular.
end: Bu değer, yatay ve dikey kaydırmalarda öğenin sonunda kaydırma etkisini uygular.

scroll-snap-stop Özelliği

scroll-snap-stop özelliği, kaydırma sırasında bir snap noktasına ulaşıldığında kaydırmanın durup durmayacağını kontrol eder. Bu özellik, kullanıcıların bir snap noktasında duraklamasını zorlayabilir, böylece daha kontrollü bir kaydırma deneyimi sunar.

.element {
  scroll-snap-stop: normal/always;
}

Bu özellik iki değere sahiptir:

normal: Bu varsayılan değerdir. Kullanıcı kaydırma sırasında bir snap noktasına ulaştığında, kaydırmanın durup durmayacağını kullanıcının kaydırma hızı ve yönü belirler.
always: Bu değer, kullanıcının her snap noktasında durmasını zorlar. Bu, özellikle bir dizi içerik arasında kesintisiz bir gezinme sağlamak istediğinizde kullanışlıdır.

overscroll-behavior Özelliği

overscroll-behavior özelliği, bir kullanıcı bir kaydırma kapsayıcı sonuna veya başına ulaştığında ne olacağını belirler. Bu, özellikle kaydırılabilir alanlar iç içe geçtiğinde yararlıdır.

.element {
  overscroll-behavior: auto/contain/none;
}

Bu özellik üç değere sahiptir:

auto: Bu varsayılan değerdir. Kullanıcı bir kaydırma içeriğinin sonuna ulaştığında, tarayıcı varsayılan davranışını sürdürür. Bu, genellikle kaydırmanın üst seviye elemana geçmesi anlamına gelir.
contain: Bu değer, kaydırmanın üst seviye elemana geçişini engeller, ancak özel davranışları tetikleyebilir (örneğin, "bounce" etkisi).
none: Bu değer, kaydırma içeriğinin sonuna ulaşıldığında herhangi bir özel davranışın tetiklenmesini engeller ve üst seviye elemana kaydırmanın geçişini de önler.

Örnek : CSS Scroll Snaps ile Gelişmiş Web Galerisi

Hem dikey hem de yatay yönde scroll edilebilen bir galeri hazırlayalım.

Galeri İçin HTML Yapısı

<div class="gallery">
  <div class="item">
    <img src="https://picsum.photos/id/33/800/600" alt="" />
  </div>
  <div class="item">
    <img src="https://picsum.photos/id/35/800/600" alt="" />
  </div>
  <div class="item">
    <img src="https://picsum.photos/id/37/800/600" alt="" />
  </div>
  <div class="item">
    <img src="https://picsum.photos/id/45/800/600" alt="" />
  </div>
  <div class="item">
    <img src="https://picsum.photos/id/55/800/600" alt="" />
  </div>
  <div class="item">
    <img src="https://picsum.photos/id/70/800/600" alt="" />
  </div>
  <div class="item">
    <img src="https://picsum.photos/id/76/800/600" alt="" />
  </div>
  <div class="item">
    <img src="https://picsum.photos/id/75/800/600" alt="" />
  </div>
</div>

CSS ile Stil Tanımlama

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 100%);
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  overscroll-behavior: contain;
  scroll-snap-stop: always;
  scroll-snap-type: both mandatory;
}

display: grid; ve grid-template-columns: repeat(4, 100%);: Bu tanımlamalar ile içeriğimizi ızgara biçiminde dört eşit sütuna ayırıyoruz.
overscroll-behavior: contain;: Kullanıcı container sonuna ulaştığında dış kaydırmayı engelliyoruz.
scroll-snap-stop: always;: Kullanıcıların her snap noktasında duraklamasını sağlıyoruz.
scroll-snap-type: both mandatory;: Yatay ve dikey kaydırmada snap noktalarını zorunlu hale getiriyoruz.

.item {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item: Her elemanın boyutunu ayarlıyor ve scroll-snap-align ile snap noktasında nasıl hizalanacağını belirtiyoruz.

Bu yapı, kullanıcıların galerideki her bir görseli rahatça inceleyebilmesi için düzenli ve kontrollü bir kaydırma deneyimi sunar. CSS Scroll Snaps kullanarak, web sitenizdeki görsel içerikleri etkileyici ve kullanıcı dostu bir şekilde sergileyebilirsiniz.

Uygulama Alanları

Resim Galerileri : Kullanıcıların resim koleksiyonları arasında kaydırma yaparken, her resmin görünüm alanı ile hizalanmasını sağlar.
Duyarlı Web Tasarımları: Kullanıcılar bir web sitesinde gezinirken, bölümlerin görünüm alanı ile hizalanmasını sağlar.
Etkileşimli Haritalar: Kullanıcıların harita üzerindeki ilgi noktalarına sorunsuz bir geçiş yapmalarını sağlar.
Ürün Vitrinleri: E-ticaret siteleri, ürünlerini düzenli bir biçimde sergilemek için bu özelliği kullanır.

CSS Scroll Snaps’ı kullanarak, kullanıcılarınıza kesintisiz ve akıcı bir gezinme deneyimi sunabilirsiniz. Unutmayın, iyi bir web tasarımı, kullanıcının sitede geçirdiği süreyi artırır

Buraya kadar okuduğunuz için teşekkür ederim. Umarım faydalı bir yazı olmuştur.