Scrollend, אירוע JavaScript חדש

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

Adam Argyle

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

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

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

אחרי scrollend הדפדפן מבצע את ההערכה הקשה הזו עבורך.

document.onscrollend = event => {…}

אלה הדברים הטובים. מתוזמן היטב ועמוס עם הרבה תנאים משמעותיים לפני פליטת הנתונים.

רוצים לנסות?

פרטי האירוע

האירוע 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

אם הדפדפן מציע את האירוע, הוא ידווח כנכון או לא נכון. ב- בבדיקה הזו, אתם יכולים להסתעף בקוד:

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