History API - بازیابی اسکرول

Paul Lewis

استفاده از History API برای مدیریت URL های خود بسیار جذاب است و همانطور که اتفاق می افتد، یکی از ویژگی های مهم برنامه های وب خوب است. با این حال، یکی از معایب آن این است که موقعیت‌های اسکرول ذخیره می‌شوند و مهمتر از آن، هر زمان که تاریخ را طی کنید، بازیابی می‌شوند . این اغلب به معنای پرش های ناخوشایند است که موقعیت اسکرول به طور خودکار تغییر می کند، مخصوصاً اگر برنامه شما انتقال را انجام دهد یا محتوای صفحه را به هر نحوی تغییر دهد. در نهایت این منجر به یک تجربه کاربری وحشتناک می شود.

برای بدتر کردن اوضاع، کار بسیار کمی می توانید در مورد آن انجام دهید: Chrome یک رویداد popState را قبل از رویداد scroll راه اندازی می کند، به این معنی که می توانید موقعیت اسکرول فعلی را در popState بخوانید و سپس آن را در کنترل کننده رویداد scroll با window.scrollTo معکوس کنید (Ewww، اما حداقل کار می کند!). با این حال، فایرفاکس رویداد scroll را قبل از popState راه‌اندازی می‌کند، بنابراین شما نمی‌دانید که مقدار اسکرول قدیمی برای بازیابی آن چه بوده است. باه!

با این حال، خبر خوب این است که یک راه حل بالقوه وجود دارد: history.scrollRestoration . به دو مقدار رشته نیاز دارد: auto ، که همه چیز را همانطور که امروز هست نگه می‌دارد (و مقدار پیش‌فرض آن است)، و manual ، که به این معنی است که شما به‌عنوان توسعه‌دهنده مالکیت تغییرات پیمایشی را که ممکن است هنگام عبور کاربر از تاریخچه برنامه مورد نیاز باشد، در اختیار خواهید گرفت. در صورت نیاز، می‌توانید موقعیت اسکرول را هنگام فشار دادن ورودی‌های history با history.pushState() پیگیری کنید.

این ویژگی جدید و آزمایشی است (اگرچه کاملاً عالی است)، بنابراین قبل از استفاده از آن مطمئن شوید که در دسترس است:

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

history.scrollRestoration در Chrome 46 به بعد پیدا خواهید کرد و می‌توانید مشخصات آن را در اینجا بیابید .

فراموش نکنید که بازخورد خود را با ما در میان بگذارید و به فروشندگان دیگر اطلاع دهید که آیا می‌خواهید از scrollRestoration نیز پشتیبانی کنند.