Scrollend, אירוע JavaScript חדש

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

Adam Argyle

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

לפני

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

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

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

אחרי

document.onscrollend = event => {…}

זה החלק הטוב. מתוזמנים בצורה מושלמת ומלאים בתנאים משמעותיים לפני ההעברה.

תמיכה בדפדפן

• 114
• 114
• 109
• x

מקור

רוצים לנסות?

פרטי האירוע

האירוע scrollend מופעל כאשר: - הדפדפן לא מציג יותר אנימציה או מתרגם גלילה. - המשתמש הפסיק לגעת במסך. - הסמן של המשתמש שחרר את אגודל הגלילה. - המשתמש הפסיק ללחוץ על המקש. - הגלילה למקטע הושלמה. - השלמת הצמדת הגלילה. - 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
};

מילוי פוליגונים ושיפור הדרגתי

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

'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 ולהטמעה.