History API - Kaydırma geri yükleme

Paul Lewis

URL'lerinizi yönetmek için History API'yi kullanmak harika bir özelliktir ve iyi web uygulamalarının önemli bir özelliğidir. Ancak bu özelliğin dezavantajlarından biri, kaydırma konumlarının depolanması ve daha da önemlisi, geçmişte gezindiğinizde geri yüklenmesidir. Bu durum genellikle, kaydırma konumu otomatik olarak değiştikçe ve özellikle de uygulamanız geçişler yapıyorsa veya sayfanın içeriğini herhangi bir şekilde değiştiriyorsa göze hoş gelmeyen sıçramalar anlamına gelir. Sonuçta bu durum korkunç bir kullanıcı deneyimine yol açar.

Daha da kötüsü, bu konuda yapabileceğiniz çok az şey var: Chrome, scroll etkinliğinden önce bir popState etkinliği tetikler. Bu, popState etkinliğindeki mevcut kaydırma konumunu okuyup scroll etkinlik işleyicisinde window.scrollTo ile tersine çevirebileceğiniz anlamına gelir (İğrenç, ama en azından çalışıyor). Ancak Firefox, scroll etkinliğini popState'den önce tetikler. Bu nedenle, eski kaydırma değerini geri yüklemek için ne olduğunu bilemezsiniz. Bah!

Ancak bu sorunu düzeltmek için history.scrollRestoration yöntemini kullanabilirsiniz. İki dize değeri alır: auto, her şeyi olduğu gibi tutar (ve varsayılan değeridir) ve manual, kullanıcı uygulamanın geçmişinde gezinirken gerekebilecek tüm kaydırma değişikliklerinin geliştirici olarak sizin sorumluluğunuzda olacağı anlamına gelir. Gerekirse history.pushState() ile geçmiş girişlerini gönderirken kaydırma konumunu takip edebilirsiniz.

Bu özellik yeni ve deneyseldir (ancak kesinlikle harikadır). Bu nedenle, kullanmadan önce özelliğin kullanılabilir olup olmadığını kontrol edin:

if ('scrollRestoration' in history) {
    // Back off, browser, I got this...
    history.scrollRestoration = 'manual';
}

history.scrollRestoration, Chrome 46 ve sonraki sürümlerde bulunur. Spesifikasyonunu burada bulabilirsiniz.

Bize geri bildirimde bulunmayı ve diğer tedarikçi firmaların da scrollRestoration'yi desteklemesini isterseniz bunu onlara bildirmeyi unutmayın.