Vue Academy · درس

إعداد سلوك التمرير

‏scrollBehavior(to, from, savedPosition)، والتمرير السلس، والتمرير إلى hash، واستعادة الموضع

إعداد سلوك التمرير درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

التحكم في التمرير عند التنقل

في تطبيق الصفحة الواحدة، لا يُعاد تحميل الصفحة، لذا لا يعيد المتصفح ضبط التمرير تلقائيًا. تتيح لكم دالة scrollBehavior في Vue Router تحديد موضع تمرير الصفحة بعد كل عملية تنقل.

مكانها

مرّروا scrollBehavior عند إنشاء جهاز التوجيه. وتُشغّل الدالة عند كل عملية تنقل.

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return a position
  }
})

المعاملات الثلاثة

تتلقى الدالة to (المسار الهدف)، وfrom (المسار الحالي)، وsavedPosition. تكون القيمة الأخيرة غير فارغة فقط عند التنقل باستخدام زري الرجوع والتقدم في المتصفح.

التمرير إلى أعلى المسارات الجديدة

السلوك الأبسط هو التمرير إلى أعلى الصفحة كلما انتقل المستخدم إلى صفحة جديدة.

scrollBehavior(to, from, savedPosition) {
  return { top: 0 }
}

استعادة الموضع عند الرجوع

عند وجود savedPosition، أعيدوه حتى يعيد زر الرجوع المستخدم إلى الموضع نفسه تمامًا — بما يطابق سلوك المتصفح الأصلي.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  return { top: 0 }
}

أهمية savedPosition

من دون استعادة savedPosition، سيضع الضغط على زر الرجوع المستخدم في أعلى قائمة طويلة كان قد مرّرها. ويؤدي إرجاعها إلى الحفاظ على موضعه.

التمرير إلى نقطة ارتساء

إذا احتوى عنوان URL الهدف على تجزئة مثل #section، فمرّروا إلى ذلك العنصر بإرجاع محدد el.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash }
  }
  return { top: 0 }
}

التمرير السلس

أضيفوا behavior: 'smooth' لتحريك التمرير بدلًا من الانتقال الفوري.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, behavior: 'smooth' }
  }
}

إضافة إزاحة لرأس ثابت

قد يحجب الرأس الثابت نقطة الارتساء الهدف. أضيفوا top كإزاحة حتى يستقر العنصر أسفل الرأس.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, top: 80 }
  }
}

تأخير التمرير

إذا حُمّل المحتوى بشكل غير متزامن، فأعيدوا Promise تُحلّ بموضع التمرير بعد تأخير، حتى يكون الهدف موجودًا عند تنفيذ التمرير.

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ top: 0 }), 300)
  })
}

دمج القواعد

يعطي المعالج الكامل الأولوية للموضع المحفوظ، ثم لنقاط الارتساء في التجزئة، ثم يعود إلى أعلى الصفحة افتراضيًا.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) return savedPosition
  if (to.hash) return { el: to.hash, behavior: 'smooth' }
  return { top: 0 }
}

اختبار سريع

اختبروا معرفتكم بسلوك التمرير.

خلاصة

يتحكم scrollBehavior في التمرير عند التنقل:

يتلقى to وfrom وsavedPosition.
أعيدوا savedPosition لاستعادة الموضع الذي كان عليه المستخدم عند استخدام زر الرجوع.
أعيدوا { el: to.hash } للتمرير إلى نقطة ارتساء.
أعيدوا { top: 0 } عند التنقلات الجديدة إلى مسارات جديدة.

الأسئلة الشائعة

هل درس «إعداد سلوك التمرير» مجاني؟

نعم — نص درس «إعداد سلوك التمرير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعداد سلوك التمرير»؟

‏scrollBehavior(to, from, savedPosition)، والتمرير السلس، والتمرير إلى hash، واستعادة الموضع تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «إعداد سلوك التمرير»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy