تنظیم هدف پیمایش برای رندر اولیه

ویژگی CSS scroll-initial-target روشی اعلانی و فقط CSS ارائه می‌دهد تا به‌محض پرداز شدن ظرف پیمایش، عنصر فرزند خاصی را به ناحیه نمایان ظرف پیمایش آن بیاورد. قبلاً توسعه‌دهندگان به جاوا اسکریپت (Element.scrollIntoView()) یا شناسه‌های قطعه نشانی وب (#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 را مشخص کنند، مرورگر عنصری را انتخاب می‌کند که ابتدا در ترتیب درخت DOM ظاهر می‌شود.
• باید ابعاد رسانه را ارائه دهید. ازآنجایی‌که موقعیت پیمایش درطول چیدمان اولیه محاسبه می‌شود، مطمئن شوید که تصاویر یا ویدیوها دارای aspect-ratio یا height/width ثابت باشند تا از جابه‌جایی هدف پس‌از بارگیری رسانه جلوگیری شود.
• باید سلسله‌مراتب تقدم را درنظر بگیرید: هم قطعه نشانی وب (مثلاً example.com/#top) و هم ویژگی scroll-start در سطح محفظه بر scroll-initial-target تقدم دارند.

راهبرد جایگزین

برای مرورگرهایی که هنوز از میانای برنامه‌سازی کاربردی پشتیبانی نمی‌کنند، از جاوا اسکریپت جایگزین استفاده کنید. از رویداد 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" });
    }
  }
});