מחקו את פונקציות הזמן הקצוב לתפוגה ומנעו את הבאגים שלהן. זה האירוע שבאמת צריך: גלילה.
לפני האירוע 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
});
לחלופין, אפשר להשתמש במאפיין event:
document.onscrollend = (event) => {
// scroll ended
};
aScrollingElement.onscrollend = (event) => {
// scroll ended
};
Polyfills ושיפורים הדרגתיים
אם מתחשק לך להשתמש באירוע החדש עכשיו, הנה העצה הטובה ביותר שלנו. אתם יכולים להמשיך להשתמש באסטרטגיה הקיימת של הפסקת גלילה (אם קיימת), ובתחילת הפעולה לבדוק את התמיכה באמצעות:
'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. בנוסף, נסו את ההדגמה בשידור חי.
תודה למהדי קאזמי על עבודת ההנדסה בנושא הזה ול-Robert Flack על הנחיות ה-API וההטמעה.