تحديد هدف للتمرير في العرض الأولي

توفّر خاصية CSS‏ scroll-initial-target طريقة تعريفية تستند إلى CSS فقط لإظهار عنصر فرعي محدّد في المنطقة المرئية من حاوية الانتقال بمجرد عرض هذه الحاوية. في السابق، كان المطوّرون يعتمدون على JavaScript (Element.scrollIntoView()) أو معرّفات أجزاء عناوين URL (#item-id)، وكلاهما له قيود ويصعب تنفيذه.

كيفية الإعداد

لتنفيذ ذلك بنجاح:

1. التأكّد من توفّر حاوية قابلة للتمرير: يجب أن يكون العنصر المستهدَف داخل حاوية قابلة للتمرير (عنصر يتضمّن قائمة كاملة تسمح بالتمرير، مثل overflow: auto). يمكن أن يكون هذا العنصر أي عنصر رئيسي، بما في ذلك عنصر الجذر <html>.
2. استهداف العنصر: طبِّق السمة scroll-initial-target: nearest على العنصر الفرعي المحدّد الذي تريد عرضه.

مثال على الرمز البرمجي: خلاصة وسائط عمودية

في هذا المثال، تبدأ الخلاصة بالتمرير إلى عنصر "مميّز" معيّن بدلاً من أعلى القائمة.

/** 
 * TARGET: The item that should be visible on initial load.
 */
.item.target {
  scroll-initial-target: nearest;
}

التنفيذ الاستراتيجي وأفضل الممارسات

• يُرجى استخدام scroll-initial-target للتجارب التي تبدأ من المنتصف، مثل تقويم يبدأ في اليوم الحالي أو معرض صور يبدأ بصورة معيّنة.
• لا تخلط بين هذا وبين التركيز على أدوات تسهيل الاستخدام. تنقل هذه السمة إطار العرض المرئي فقط، ولا تنقل تركيز لوحة المفاتيح. يجب إدارة السمة element.focus() يدويًا إذا كان الهدف هو أن تكون نقطة البداية لمستخدمي لوحة المفاتيح.
• لا تستخدِم هذه السمة إذا كنت بحاجة إلى صورة متحركة سلسة لـ "التمرير" عند التحميل، لأنّ هذه السمة منفصلة وتضبط الموضع على الفور أثناء مرحلة التنسيق.
• لا تضبط السمة scroll-initial-target على عناصر متعددة ضمن الحاوية نفسها القابلة للتمرير. إذا حدّدت عناصر متعددة السمة scroll-initial-target: nearest، يختار المتصفّح العنصر الذي يظهر أولاً في ترتيب شجرة نموذج العناصر في المستند.
• يجب تقديم أبعاد الوسائط. بما أنّه يتم احتساب موضع الانتقال أثناء التنسيق الأولي، تأكَّد من أنّ الصور أو الفيديوهات تتضمّن السمتَين aspect-ratio أو height/width ثابتتَين لمنع انتقال الهدف بعد تحميل الوسائط.
• يجب مراعاة التسلسل الهرمي للأولوية: يحظى كلّ من جزء من عنوان URL (مثل example.com/#top) والسمة scroll-start على مستوى الحاوية بالأولوية على scroll-initial-target.

استراتيجية الإجراءات الاحتياطية

بالنسبة إلى المتصفّحات التي لا تتوافق مع واجهة برمجة التطبيقات هذه بعد، استخدِم إجراءً احتياطيًا في JavaScript. استخدِم الحدث DOMContentLoaded لضمان أن يمرّر المتصفّح العنصر إلى العرض فور اكتمال تحليل HTML، ما يوفّر تجربة أسرع من انتظار تحميل جميع الصور والموارد. يمكنك أيضًا وضع النص البرمجي في نهاية العنصر <body>، ما يغنيك عن استخدام متتبِّع الأحداث.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const feedTarget = document.querySelector(".item.target");
    if (feedTarget) {
      // 'block: center' ensures the featured media is centered in view
      feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
    }
  }
});