CSS hap yazısı : CSS Scroll Snap💡
--
Google Chrome 10. yılını Chrome 69 sürümü ile kutluyor. Bu sürümde neler gelmiş diye bakarken aslında çok da yeni olmayan ama bir kısmı deprecated olup bir kısmı geliştirilen CSS Scroll Snap özelliğini keşfettim. Daha fazla kişiye ulaşabilmesi adına da biraz daha detaylandırıp, bu özellikten bahsedeceğim.
Öncelikle gündelik hayattan bir örnek vermek istiyorum. Hürriyet’in bazı responsive sayfalarında denk gelmişsinizdir, web görünümünde belirli bir kart yapısına sahip bir modül, mobile geçtiğinde yerden tasarruf yapmak amacıyla yatayda scroll eden bir davranışa dönüşür. Bunu yapmanın da 2 farklı yolu vardır:
- Kapsayıcıya yatayda overflow scroll özelliği verilir ve içerisindeki mini kapsayıcıya da bir genişlik verilir ve kullanıcı istediği şekilde scroll edebilir.
Bu yöntemin artısı, herhangi bir JavaScript işlemi yapmadan, minik bir slider yapmaya olanak sağlaması. Eksileri ise, içerisindeki kart sayısı dinamik değişen alanlarda, yukarıda genişlik verilir dediğim kapsayıcıya verilecek genişlik değerini sabit vermek imkansız hale gelir. Bir diğer önemlisi ise kullanıcı bir parmak hareketiyle tüm kartları geçip en sona gelebilir. Bu size eksi olarak gelmeyebilir ancak yayıncıysanız tüm içeriklerinizin görünmesini arzu edersiniz. Bu sebepten ötürü de aşağıdaki yöntemi kullanıp gerçek bir slider deneyimi sunarız:
- JavaScript ile sayfanın load ve resize eventlerinde, mobil görünümde olup olmamayı kontrol edip, modülümüzü slider şeklinde çalışması için tetiklemek. Bunun için bir slider plugini kullanabilirsiniz ya da kendi yazdığınız da vardır bu çok farketmez. (Biz Swiper kullanıyoruz) Sonuç olarak da sayfaya ekstradan JS kontrolleri ve işlemleri sokmuş oluyoruz.
Bu kadar girizgahtan sonra sanırım bu özelliğin ne işe yaradığı daha çok oturacak. Sitelerindeki örnek videoyu burada paylaşıyorum bakalım nasıl bir deneyim sunuyor :
https://developers.google.com/web/updates/images/2018/07/css-scroll-snap/gallery-page.mp4
Scroll Snap bize ne sunuyor?
Bize sunduğu şey şu, içerisindeki öğeleri atlamadan tek tek geçmeyi, dilersek ortalayarak dilersek başa ya da sona hizalayarak geçmeyi sunuyor. Ve bunu yaparken de gerçekten insanı mutlu edecek seviyede(en azından ben öyle hissediyorum) pürüzsüz bir geçişle bunu yapıyor.
Her imajı ortalayarak slider oluşturmak için yapmamız gerekenler çok kolay:
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}Scroll Snap browser desteği ne durumda?
Aslına bakarsanız hiç fena değil, caniuse üzerinden güncel destek listesine bakarsanız modern web browserların neredeyse tümünün desteklediğini, mobiller için ise henüz erken olduğunu görebilirsiniz:
Amacım gerçek hayattan bir örnekle harmanlayarak bir bilgi vermekti. Daha fazla detay ve örneklere aşağıdaki linklerden ulaşabilirsiniz:
