דחיית העבודה עד לסיום הגלילה

הגלילה באינטרנט צריכה להיות חלקה ורספונסיבית. ביצוע משימות כבדות – כמו חישובים מחדש של פריסה, מעקב אחר ביקונים של נתוני ניתוח או עדכוני DOM דינמיים – במהלך הגלילה עלול להעמיס על ה-thread הראשי, וכתוצאה מכך לגרום לפריימים שהושמטו ולשינויים תכופים בפריסה.

בעבר, מפתחים הסתמכו על ביטול הקפצת האירוע scroll באמצעות setTimeout() כדי לנחש מתי הגלילה הסתיימה. עם זאת, הפונקציות האלה לא אמינות. הן יכולות לפעול בזמן שהמשתמש עדיין גולל.

האירוע scrollend מציע פתרון אמין מאוד שמבוסס על ביצועים. הדפדפן מפעיל אירוע scrollend בדיוק כשהגלילה נעצרת, כל המעברים מסתיימים ותנועת המגע משוחררת.

איך להטמיע

כדי להטמיע דפוס של דחיית עבודה:

1. הגדרת מאגר שניתן לגלול: יוצרים מאגר עם overflow: auto או overflow: scroll.
2. האזנה לאירועים מסוג scroll: צריך להשתמש במאזין הזה רק למדדים דינמיים בסיסיים או לסגנון פריסה אינפורמטיבי. אל תבצעו כאן עבודה כבדה.
3. האזנה לאירועי scrollend: רושמים קריאה חוזרת (callback) של scrollend במאגר הגלילה או במסמך עצמו.
4. ביצוע עבודה כבדה בקריאה החוזרת (callback): זה המקום שבו אפשר לאחזר תוכן דינמי או להפעיל פריסות DOM מקיפות בצורה בטוחה.

קוד לדוגמה

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

const scroller = document.querySelector('.scroll-container');

// 1. Informative feedback during scroll
scroller.addEventListener('scroll', () => {
  // Avoid dynamic heavier data updates here
  console.log('Scrolling dynamically... updates deferred');
});

// 2. Safe callback when scrolling rests
scroller.addEventListener('scrollend', () => {
  // Run layout recalculations or analytical beacons updates here
  const currentVisibleSection = findMostVisibleSection(scroller);
  fetchAdditionalData(currentVisibleSection);
});

הטמעה אסטרטגית ושיטות מומלצות

• מומלץ להשתמש באירועי scrollend במקום באירועי scroll עם השהיה כשמפעילים ביקונים של נתוני פריסה או כשמאחזרים פריסת תוכן חדשה באופן דינמי.
• מומלץ לשלב את זה עם אינטראקציות הצמדה של scrollSnapChange או scrollSnapChanging אם אתם יוצרים קרוסלות או שקפים של גלריות המלצות.
• אל תקבצו עדכונים דינמיים שתלויים בפריסה בתוך פונקציות קריאה חוזרת (callback) של גלילה חזותית דינמית.
• מומלץ לוודא שהגדלה וגלילה של אזור התצוגה החזותי מפעילות את האירוע scrollend בצורה נכונה.

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

בדפדפנים שלא נתמכים, צריך לחזור לאירוע scroll עם setTimeout כדי לשלוח אירוע scrollend מותאם אישית.

function initializeDemo() {
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scrollend', () => {
    // Safe execution
  });
}

if ('onscrollend' in window) {
  initializeDemo();
} else {
  initializeDemo();
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scroll', () => {
    clearTimeout(window.scrollendtimer);
    window.scrollendtimer = setTimeout(() => {
      scroller.dispatchEvent(new CustomEvent('scrollend'));
    }, 100);
  });
}