CSS Scroll Snap ile Kayma Efektlerini Düzenleme

Web sitelerde mobil ve tablet kullanımı arttıkça dokunmatik özelliği de UI/UX olarak öne çıkmaya başladı. Sadece slider’lar sürüklenebilir yerler olmaktan çıktı ve sayfanın herhangi bir yerinde hareketliliğe göre efekt kullanımı gerekli hale geldi.

Normalde CSS’de Bootstrap benzeri kütüphaneler sayesinde slider veya galeriler estetik kayma efektleri ile çalışıyorlar. Sayfadaki herhangi bir div’e de CSS Scroll Snap ile hem yatay hem dikey olarak kaydırmak ve bunu estetik şekilde tasarlamak mümkün.

Benim yaptığım örnekte ilk adım olarak, kaymasını istediğimiz alanın kapsayıcısına display: flex ve overflow-x: auto tanımlamaları yapılıyor. İçeriklerin yatay veya dikey olarak hizalanıp, overflow: auto ile kapsayıcısının dışına taşması gerekiyor.

<div class="section">
  <div class="sub_div div_1">Item 1</div>
  <div class="sub_div div_2">Item 2</div>
  <div class="sub_div div_3">Item 3</div>
  <div class="sub_div div_4">Item 4</div>
  <div class="sub_div div_5">Item 5</div>
  <div class="sub_div div_6">Item 6</div>
  <div class="sub_div div_7">Item 7</div>
  <div class="sub_div div_8">Item 8</div>
  <div class="sub_div div_9">Item 9</div>
  <div class="sub_div div_10">Item 10</div>
</div>

.section {
   display: flex;
   overflow-x: auto;
}

Bu şekilde layout oluştu.

Ancak kutuların kayışı hala düzgün olmayacak. Yani bir slider’da olduğu gibi durması gerektiği yerde durmayacak ve kayabildiği kadar yere kayacak. Bunun için kapsayıcı olan section’a ve altındaki div’lere iki yeni özellik eklemek gerekiyor:

Altındaki div’lere: scroll-snap-align: start;

Scroll-snap-type ile kapsayıcının içindekileri sadece x veya y ekseninde kayacağı belirtildi. Örneğin diklemesine kayan bir yer olsun isteseydik scroll-snap-type değerini ‘y’ olarak belirleyecektik. Mandatory özelliği de bunun, ne olursa olsun her seferinde gerçekleşeceği anlamına geliyor.

Scroll-snap-align ile de, sola hizalı olacak şekilde en yakın div’in en az %50‘si hala alanın içerisindeyse, onu zaman otomatik hizalama yapacak şekilde ayarlandı.

Dikey ve Yatay Hizalama

Yukarıdaki örnekte align: start olarak belirlenmiş ve sola sıfırlanmıştı. Benzer şekilde center veya end de kullanılabilir. Böyle olunca kayan alan o hizaya göre kendini otomatikman durduracak.

scroll-snap-align: end;

scroll-snap-align: center;

Padding ve Margin Kullanımı

Daha düzgün bir görünüm için hem kapsayıcıya hem de içindeki div’lere padding ve margin verilebilir. Bunun yanında, tıpkı flexbox’da flex: gap kullanır gibi, scroll-snap’de de scroll-padding ve scroll-margin kullanılabilir. Çalıştığınız kodun daha temiz ve anlaşılır olması için tercih edilebilir.

Mobil Görünümde Kullanım

Scroll-snap’in y ekseninde akacak şekilde düzenleyerek mobilde kullanıma da uygun bir tasarım oluşturabilirsiniz. Aşağıdaki örnekte önce kapsayıcıya height: 100vh vererek ekranı tamamen kaplaması sağlandı. Flex-direction: row özelliği ile içindeki tüm div’ler dikey olarak hizalanmış oldu. Scroll özelliğinin dikey olacağını belirtmek için scroll-snap-type: y mandatory dendi. Div’lere height: 70vh verdikten sonra scroll-snap-align: center olarak belirtildi. Böylece aktif olan div ortalanmış oldu.

.section {
   height: 100vh;
   flex-direction: row;
   overflow-y: auto;
   scroll-snap-type: y mandatory;
}
.sub_div {
   height: 70vh;
   scroll-snap-align: center;
}

Scroll-snap’in sevdiğim yanı sadece görsel odaklı düşünmek yerine card, metin, ikon hatta section’ların altındaki büyük alanlarda da kullanılabilir olması. Bu şekilde sayfa çok daha dinamik bir hale gelebilir, çok vakit harcamadan mobil/tablet kullanımına uygun olarak yazılabilir.

Farklı örneklerle scroll-snap kullanımını çeşitlendirmek mümkün. Benim verdiğim örnekler çok temel hizalama ve yön verme ile ilgili efektler. Bu özelliklerle birlikte Javascript’deki çeşitli api veya event’ler kullanılarak aktif alana yeni özellikler eklenebilir.