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