Scrollend, אירוע JavaScript חדש

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

Adam Argyle

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

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

הדבר הכי טוב שאפשר לעשות עם אסטרטגיית setTimeout() הוא לדעת אם הגלילה נעצרה ב-100ms. כך האירוע דומה יותר לאירוע של השהיית גלילה, ולא לאירוע של סיום גלילה.

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

document.onscrollend = event => {…}

זה מה שחשוב. התזמון מושלם והתנאים משמעותיים לפני שליחת הנתונים.

כדאי לנסות!

פרטי האירוע

האירוע scrollend מופעל כש: - הדפדפן מפסיק להנפיש או לתרגם גלילה. – המשתמש הפסיק לגעת במסך. – המשתמש הרפה את האחיזה בלחצן העכבר או באצבע על המסך. – המשתמש הפסיק ללחוץ על המקש. – הגלילה לקטע הושלמה. ‫- Scroll snap הושלם. ‫- scrollTo() הושלם. – המשתמש גלל את אזור התצוגה החזותי.

האירוע scrollend לא מופעל במקרים הבאים: - תנועת המשתמש לא גרמה לשינויים במיקום הגלילה (לא התרחש תרגום). ‫- scrollTo() לא הניב תרגום.

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

שימוש באירוע

בדומה לאירועי גלילה אחרים, אפשר לרשום מאזינים בכמה דרכים.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

או להשתמש במאפיין האירוע:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

‫Polyfills ושיפורים הדרגתיים

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

'onscrollend' in window
// true, if available

הפונקציה תחזיר true או false בהתאם לשאלה אם הדפדפן מציע את האירוע. בעזרת הבדיקה הזו, אפשר ליצור הסתעפות בקוד:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

זהו התחלה טובה לשיפור הדרגתי של אירוע scrollend כשהוא יהיה זמין. אפשר גם לנסות polyfill (NPM) שיצרתי, שמבצע את הפעולה הכי טובה שהדפדפן יכול לבצע:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

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

תרחישים לדוגמה

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

אפשר להשתמש באירוע scrollend כדי להפעיל פעולות שונות. תרחיש שימוש נפוץ הוא סנכרון של רכיבי ממשק משויכים עם המיקום שבו הגלילה נעצרה. לדוגמה: - סנכרון של מיקום הגלילה בקרוסלה עם אינדיקטור של נקודה. ‫- סנכרון פריט בגלריה עם המטא-נתונים שלו. – אחזור נתונים אחרי שמשתמש גולל לכרטיסייה חדשה.

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

אפשר גם להשתמש באירוע הזה לסנכרון אחרי גלילה אוטומטית או גלילה של משתמש, או אחרי פעולות כמו רישום נתונים של ניתוח נתונים.

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

תודה למהדי קזמי (Mehdi Kazemi) על עבודת התכנון שלו בנושא הזה, ולרוברט פלאק על ההנחיות בנושא API והטמעה.