History API - استعادة التمرير

إن استخدام History API لإدارة عناوين URL أمر رائع، وفي حاله، ميزة أساسية لتطبيقات الويب الجيدة. ومن سلبياته أنه يتم تخزين مواضع التمرير، ثم استعادتها كلما اجتزت السجلّ. ويعني هذا في كثير من الأحيان حدوث قفزات كبيرة مع تغير موضع التمرير تلقائيًا، وخاصةً إذا كان تطبيقك يجري انتقالات أو غيّر محتوى الصفحة بأي طريقة. يؤدي هذا في النهاية إلى تجربة مستخدم سيئة.

ومما يزيد الأمر سوءًا، لا يمكنك اتّخاذ إجراء سوى القليل جدًا من الإجراءات: يبدأ Chrome حدث popState قبل الحدث scroll، ما يعني أنّه يمكنك قراءة موضع التمرير الحالي في popState ثم عكسه في معالج أحداث scroll باستخدام window.scrollTo (Ewww، ولكنه يعمل على الأقل). ومع ذلك، يشغّل Firefox حدث scroll قبل popState، لذا لا تكون لديك أي فكرة عن قيمة التمرير القديمة لاستعادته. يا إلهي!

ولكن الخبر السار هو أنّ هناك حلًا محتملاً: history.scrollRestoration. يتطلب ذلك قيمتَي سلسلة: auto، ما يضمن الحفاظ على كل البيانات كما هي اليوم (وهي قيمتها التلقائية) وmanual، ما يعني أنّك بصفتك المطوّر ستمتلك أي تغييرات في التمرير قد تكون مطلوبة عندما يجتاز المستخدم سجلّ التطبيق. ويمكنك تتبُّع موضع التمرير أثناء دفع إدخالات السجلّ باستخدام history.pushState()، إذا أردت ذلك.

هذه الميزة جديدة وتجريبية (ولكنها رائعة تمامًا)، لذا تأكد من توفرها قبل استخدامها:

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

يمكنك العثور على history.scrollRestoration في الإصدار Chrome 46 والإصدارات الأحدث، ويمكنك الاطّلاع على مواصفاته هنا.

يُرجى إرسال ملاحظاتك إلينا والسماح للمورّدين الآخرين بمعرفة ما إذا كنت تريد منهم دعم scrollRestoration أيضًا.