تخيل معايا السيناريو ده: قاعد بتفتح موقع كبير، مثلاً متجر إلكتروني أو تطبيق عقارات شغال بتطوير الويب (Web Development) ومستخدم مكتبة إنرشيا جي إس (Inertia.js) مع لارا كويست (Laravel) وفويو (Vue.js) أو رياكت (React). نزلت في الصفحة لحد المنتج رقم 50، دخلت تتفرج على تفاصيل المنتج، وبعدين دوست زرار "الرجوع" (Back Button) في المتصفح عشان تكمل تصفح.. وفجأة!

الصفحة بترجعك لأول القائمة فوق خالص! "الـ Scroll Position راح في خبر كان". بجد ده وجع قلب حقيقي لكل مبرمج (Developer) وشغل عالي بيخلي المستخدم يتنرفز ويقفل الموقع. في المقال ده، هنتكلم بالتفصيل عن حل مشكلة فقدان موضع التمرير (Scroll Position) عند التنقل في مشاريع إنرشيا (Inertia.js) الكبيرة، وهنعرف إزاي نرجع للمستخدم التجربة السلسة اللي يستاهلها.

إيه هي المشكلة الأساسية وليه بتحصل مع Inertia.js؟

عشان نفهم الحل، لازم نعرف الأول إحنا ليه وقعنا في المشكلة دي. مكتبة إنرشيا جي إس (Inertia.js) بتعتمد في شغلها على إحداثيات ما تُسمى بـ تطبيق صفحة واحدة (Single Page Application - SPA) بس من غير تعقيدات الـ APIs المنفصلة. لما المستخدم بيضغط على أي رابط، إنرشيا بتعمل طلب أجاكس (AJAX Request) وبتجيب بيانات الصفحة الجديدة وتحدث الـ DOM.

المشكلة بتظهر بوضوح لما يكون عندك قائمة طويلة (Long List) فيها بيانات كتيرة جداً (Infinite Scrolling أو Pagination)، والمستخدم بينزل تحت خالص. لما بيتنقل لصفحة تانية ويرجع، المتصفح مش بيعرف يحافظ على مكان الـ Scroll الطبيعي لأن الصفحة بتتحدث بطريقة ديناميكية، ومكتبة إنرشيا محتاجة مساعدة إضافية عشان تفتكر الـ State دي.

الحل السحري: ميزة Scroll Management في Inertia

فريق تطوير إنرشيا (Inertia.js Team) مش نايمين، وهم وفروا لنا حلول جاهزة ومحترمة عشان نحل المشكلة دي من غير ما نكتب أكواد معقدة. النسخ الحديثة من إنرشيا بتدعم ميزة إدارة التمرير (Scroll Management) بشكل افتراضي، بس أحياناً في المشاريع الكبيرة (Large Scale Projects) بنحتاج نضبطها بإيدينا عشان تظبط الملي.

عشان تفعل وتظبط الـ Scroll Position، بنحتاج نعدل على ملف الإعدادات الرئيسي اللي غالباً بيكون app.js أو app.ts حسب إنت شغال بـ فويو (Vue) أو رياكت (React). تعالوا نشوف مثال عملي لإعدادات إنرشيا مع فويو 3 (Vue 3):

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
  // هنا بنهتم بإعدادات التمرير
  progress: {
    color: '#4B5563',
  },
})

التحكم اليدوي في الـ Scroll للعناصر المعقدة

في أوقات كتير، الـ Default Behavior بتاع إنرشيا بيكون كيف, بس لو عندك حاويات تمرير مخصصة (Custom Scrollable Containers) زي مثلاً عنصر ديف (Div) جواه جدول طويل أو قائمة جانبية، هنا إنرشيا لوحدها مش هتقدر تخمن إنت قصدك أنهي عنصر بالضبط يحصلّه حفظ للـ Scroll.

الحل هنا إننا نعتمد على هوكس (Hooks) إنرشيا زي router.on('navigate', ...) عشان نحفظ مكان الـ Scroll في الـ Session Storage ونرجعه تاني لما المستخدم يرجع. تعالوا نشوف كود مقترح يوضح الفكرة دي:

import { router } from '@inertiajs/vue3'

// حفظ مكان التمرير قبل مغادرة الصفحة
router.on('before', (event) => {
  const scrollContainer = document.querySelector('.custom-scroll-area')
  if (scrollContainer) {
    sessionStorage.setItem('scroll_pos', scrollContainer.scrollTop)
  }
})

// استعادة مكان التمرير بعد تحميل الصفحة الجديدة
router.on('navigate', (event) => {
  const savedPosition = sessionStorage.getItem('scroll_pos')
  if (savedPosition) {
    setTimeout(() => {
      const scrollContainer = document.querySelector('.custom-scroll-area')
      if (scrollContainer) {
        scrollContainer.scrollTop = savedPosition
      }
    }, 100)
  }
})

نصائح ذهبية لأداء أفضل في المشاريع الكبيرة (Performance Optimization)

عشان تضمن إن الحلول دي تشتغل بكفاءة ومتاكلش رامات الجهاز ولا تسبب تهنيج في المتصفح، لازم تاخد بالك من النقط التانية دي:

• تنظيف الـ Session Storage: حاول دايماً تمسح البيانات القديمة اللي ملهاش لازمة عشان ميكحصلش تضخم في مساحة المتصفح.
• استخدام الـ Virtualization: لو القائمة عندك فيها آلاف العناصر (Items)، فكر بجدية تستخدم تقنية مثل (Virtual Scrolling) عشان تعرض العناصر المرئية بس على الشاشة، وده هيحل 90% من مشاكل الـ Scroll من الأساس.
• اختبار المتصفحات (Cross-Browser Testing): دايماً جرب الكود على جوجل كروم (Google Chrome) وفايرفوكس (Firefox) لأن طريقة التعامل مع الـ Scroll Positions بتختلف أحياناً.

خاتمة ونصيحة أخيرة

يا صديقي المبرمج، التفاصيل الصغيرة هي اللي بتفرق بين موقع عادي وموقع احترافي المستخدم بيعشق يفتحه. حل مشاكل زي فقدان موضع التمرير في مشاريع إنرشيا (Inertia.js) الكبيرة بيعكس مدى اهتمامك بتجربة المستخدم (User Experience - UX) وجودة الكود (Code Quality) بتاعاتك. متستصعبش أي مشكلة، واقرا الـ Documentation دايماً بحب وفضول.

تمنياتي ليك برحلة ممتعة في عالم تطوير الويب، وكل خطوة وأنت بتقنيات أحدث وأقوى!