Scrolljacking: Nerede İşe Yarar, Nerede Kırılır?

Scrolljacking, kaydırma çubuğunu kullanıcıdan alıp siteye vermek demek. Tekerlek her döndüğünde ne olacağına sayfa karar verir: bir bölüm ilerler, bir animasyon oynar, bazen hiçbir şey olmaz. Ürün tanıtım sayfalarında etkileyici duruyor, bilgi arayan birinin karşısına çıktığında sinir bozuyor. Aradaki farkın nerede başladığına bakalım.

Teknik olarak ne oluyor?

Scrolljacking'in tek bir uygulaması yok ama çekirdeği hep aynı: sayfa wheel olayını dinler, preventDefault() ile tarayıcının varsayılan kaydırmasını iptal eder ve içeriği kendi hesabına göre taşır. Genellikle transform ya da bölüm bölüm gösterme/gizleme ile.

Burada ilk bedel görünmez bir yerde ödenir. Tarayıcılar, kök seviyedeki wheel ve touchstart dinleyicilerini uzun zamandır varsayılan olarak passive kabul ediyor; kaydırmayı ana iş parçacığını beklemeden yapabilmek için. preventDefault() çağırabilmek istiyorsan dinleyiciyi açıkça { passive: false } ile eklemen gerekir, yani o optimizasyondan çıkarsın. Kaydırma artık senin JavaScript'inin ne kadar hızlı döndüğüne bağlıdır. Sayfa ağırsa kullanıcı bunu takılma olarak hisseder ve genelde sayfanın bozuk olduğunu düşünür, jestin farkında bile olmadan.

Kaynak metinlerin atladığı yer: girdi tek tip değil

Scrolljacking anlatan yazıların ortak tavsiyesi "ideal kaydırma hızını testle bulun" olur. Kulağa makul geliyor, ama test edeceğin sayı cihazdan cihaza aynı anlama gelmiyor.

Fare tekerleği tek bir tıkta bir wheel olayı üretir. Trackpad'de aynı jest, ivmelenme ve momentum yüzünden onlarca olay üretir; parmağını kaldırdıktan sonra bile olaylar akmaya devam eder. Üstüne deltaMode her yerde piksel değildir, satır ya da sayfa cinsinden de gelebilir. "Bir kaydırma bir bölüm" mantığını fare tekerleğine göre ayarlarsan, trackpad kullanan biri tek dokunuşta üç bölüm birden atlar ve nerede olduğunu kaybeder.

Peki ya doğru eşiği bulduğunu varsayalım? O zaman da fare kullanıcısı için sayfa hantallaşır. Tek bir sabitin iki girdi türünü birden mutlu ettiği bir nokta yok, seçim yapman gerekir.

Kaydırmadan başka yollar da var

Asıl kırılma, kullanıcının sayfayı tekerlekle gezmediği durumlarda ortaya çıkıyor. Çoğu scrolljacking kurgusu yalnızca wheel ve dokunma olaylarını ele alır, geri kalanı unutur:

• Boşluk tuşu, Page Down, ok tuşları ve End tuşu. Klavyeyle gezen biri ya hiçbir yere gidemez ya da animasyonun ortasına düşer.
• Ctrl+F ile sayfa içi arama. Tarayıcı eşleşmeyi bulup oraya kaydırmak ister; sayfa gerçek anlamda kaydırılmıyorsa bu çalışmaz. Bölümler kaydırma sırasında DOM'a ekleniyorsa arama sonucu hiç bulamaz bile.
• Kaydırma çubuğunun kendisi. Konum ve uzunluk bilgisi, geriye kalan içeriğin gerçek miktarını yansıtmaz.
• Ekran okuyucu ve prefers-reduced-motion tercihi. Hareket duyarlılığı olan kullanıcı için sürekli akan tam ekran geçişler rahatsızlık verici olabiliyor.

Bunların hepsini tek tek desteklemek mümkün, ama pratikte kimse yapmıyor. Yapılan iş genelde şu: masaüstünde tekerlekle test et, güzel görünüyorsa yayına al.

Tavsiyelerin içindeki çelişki

Scrolljacking rehberlerinde iki madde neredeyse her zaman yan yana durur: "içeriğinizi hikâye gibi anlatmak için kullanın" ve "bu alanlara uzun metin, önemli bilgi koymayın". İkisi aynı anda doğru olamaz. Önemli bilgiyi koyamıyorsan orada anlatılan bir hikâye de yoktur, dekor vardır.

Bu çelişki aslında kullanım alanını kendiliğinden daraltıyor. Scrolljacking, içeriği taşımak için değil, tek bir şeyi göstermek için işe yarıyor: bir ürünün açılıp kapanması, bir mekanizmanın kesiti, bir haritanın büyümesi. Yani metnin değil görselin ana aktör olduğu, kullanıcının o an bilgi aramadığı sayfalar. Apple'ın ürün sayfaları bu yüzden savunulabilir; oraya gelen kişi zaten seyretmeye geliyor. Aynı kurgu bir dokümantasyon sayfasında ya da fiyat listesinde savunulamaz.

Daha ucuz ve daha sağlam yol

position: sticky ile sabitlenmiş bir bölüm ve kaydırma konumuna bağlanmış bir animasyonu, wheel olayını yakalayan bir scrolljacking kurgusundan çok daha güvenilir bulurum. Fark küçük görünüyor ama kritik: birincisi tarayıcının kaydırmasını okur, ikincisi onun yerine geçmeye çalışır. Okuyan çözümde kaydırma çubuğu doğru kalır, klavye çalışır, Ctrl+F çalışır, geri tuşu ve derin bağlantı çalışır, kullanıcı sıkıldığında hızla aşağı kaydırıp geçebilir. Görsel sonuç ise çoğu durumda birbirinden ayırt edilemiyor.

Gerçekten kaydırmayı ele geçirmen gerekiyorsa, kapsamı tek bir bölümle sınırla ve çıkışı her an açık tut: sabit bir menü, görünür bir "atla" bağlantısı, bölümün sonunda normal kaydırmaya iade. Mobilde ise yeniden düşünmek yerine devre dışı bırakmak çoğu zaman daha iyi sonuç veriyor; küçük ekranda tam ekran geçişlerin maliyeti, kazandırdığı etkiden büyük.

Kullanılabilirlik tarafında ne olduğunu merak ediyorsan, Nielsen Norman Group'un konu hakkındaki değerlendirmesi iyi bir başlangıç: Scrolljacking Hurts Usability.