History API - Kaydırma geri yükleme

Paul Lewis

URL'lerinizi yönetmek için History API'sini kullanmak harikadır ve aynı zamanda iyi web uygulamalarının çok önemli bir özelliğidir. Bununla birlikte, olumsuz yönlerinden biri, kaydırma konumlarının depolanması ve daha da önemlisi, geçmişi her gezindiğinizde geri yüklenmesidir. Kaydırma konumu otomatik olarak değiştiğinde (özellikle uygulamanızda geçiş yapıldığında veya sayfanın içeriğini herhangi bir şekilde değiştirdiğinde) bu durum genellikle istenmeyen atlamalar anlamına gelir. Sonuç olarak bu, korkunç bir kullanıcı deneyimine yol açıyor.

İşleri daha da kötü hale getirmek için yapabileceğiniz pek çok şey yoktur: Chrome, scroll etkinliğinden önce bir popState etkinliğini tetikler. Bu sayede, popState ürününde geçerli kaydırma konumunu okuyabilir, ardından scroll etkinlik işleyicisinde window.scrollTo ile tersine çevirebilirsiniz (Ama en azından bu çalışıyor!). Ancak Firefox, scroll etkinliğini popState öncesinde tetikler. Bu nedenle, eski kaydırma değerini geri yüklemek için ne olduğu hakkında bilginiz yoktur. Bah!

Ancak iyi bir haberimiz var: history.scrollRestoration. İki dize değeri alır: Her şeyi şu anki haliyle (ve varsayılan değeri) koruyan auto ve manual; bu, geliştirici olarak bir kullanıcı uygulamanın geçmişini geçtiğinde gerekebilecek tüm kaydırma değişikliklerinin sahipliğini siz alacağınız anlamına gelir. İsterseniz history.pushState() ile geçmiş girişlerini aktarırken kaydırma konumunu takip edebilirsiniz.

Bu özellik yeni ve deneyseldir (ama kesinlikle harikadır), bu nedenle özelliği kullanmadan önce kullanılabilir olup olmadığını kontrol etmeyi unutmayın:

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

Chrome 46 ve sonraki sürümlerde history.scrollRestoration göreceksiniz. Spesifikasyonu burada bulabilirsiniz.

Bize geri bildirim göndermeyi ve scrollRestoration adlı tedarikçiyi desteklemelerini istiyorsanız diğer tedarikçileri bilgilendirmeyi unutmayın.