מוחקים את פונקציות הזמן הקצוב לתפוגה ומנקים את הבאגים שגרמו להם, הנה האירוע שבאמת צריך: גלילה בסוף.
לפני האירוע 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 ולהטמעה.