הגדרת יעד גלילה לעיבוד הראשוני

המאפיין scroll-initial-target ב-CSS מציע דרך הצהרתית, ב-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, הדפדפן בוחר את הרכיב שמופיע ראשון בסדר של עץ ה-DOM.
• כן: מספקים את המידות של המדיה. מכיוון שמיקום הגלילה מחושב במהלך הפריסה הראשונית, חשוב לוודא שלתמונות או לסרטונים יש aspect-ratio או height/width קבועים כדי למנוע מהיעד לזוז אחרי שהמדיה נטענת.
• חשוב להביא בחשבון את היררכיית הקדימויות: פרגמנט URL (למשל, example.com/#top) והמאפיין scroll-start ברמת מאגר התגים מקבלים קדימות על פני scroll-initial-target.

אסטרטגיית גיבוי

בדפדפנים שעדיין לא תומכים ב-API, צריך להשתמש ב-JavaScript כחלופה. כדאי להשתמש באירוע DOMContentLoaded כדי לוודא שהדפדפן גולל את הרכיב לתצוגה ברגע שהניתוח של ה-HTML מסתיים. כך חוויית המשתמש תהיה מהירה יותר מאשר אם מחכים שכל התמונות והמשאבים ייטענו. אפשר גם להציב את הסקריפט בסוף הרכיב <body>, וכך לא צריך להשתמש ברכיב event listener.

/**
 * 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" });
    }
  }
});