גלילה באירועי Snap

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

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

עם זאת, לפני scrollSnapChanging, לא היה אפשר לדעת מתי יעד הצמדה משתנה או מה הוא משתנה (למשל, אם נותנים לו גלילה בדף).

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

scrollSnapChange

האירוע הזה מופעל רק אם תנועת גלילה הובילה לכך שמבוסס על יעד Snap חדש, ובסדר הבא

1. אחרי שהגלילה מנוחה.
2. לפני scrollend.

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

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

האירוע חושף את הפריט המוצמד באובייקט האירוע בתור snapTargetBlock ו-snapTargetInline. אם פס הגלילה אופקי בלבד, המאפיין snapTargetBlock יהיה null. הערך של המאפיין יהיה הצומת של הרכיב.

פרטים ייחודיים לגלילהSnapChange

מופעלת עד שהמשתמש משחרר את התנועה

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

לא מופעל אם יעד הצמדה לא השתנה

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

scrollSnapChanging

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

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

האירוע חושף את הפריט המוצמד באובייקט האירוע בתור snapTargetBlock ו-snapTargetInline. אם גלילה אנכית בלבד, המאפיין snapTargetInline יהיה null. הערך של המאפיין יהיה הצומת של הרכיב.

פרטים ייחודיים לגלילהלשינוי

מופעלת מוקדם יותר ולעיתים קרובות במהלך תנועת גלילה

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

לא מפעילה את כל משטחי הצמדה בדרך ליעד הצמדה חדש

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

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

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

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

הדגשת המלצה

הדוגמה הזו מקדמת או מתמקדת באופן חזותי בהמלצה הקצרה.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

הצגת הכיתוב של הפריט שצולם

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

יוצרים אנימציה פעם אחת, הילדים בשקף של מצגת מבוימת

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

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

לחיצה על x ו-y בגלילה

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

שתי מודעות גלילה מקושרות

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

בוחר צבעים OKLCH

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

אנימציה מדהימה של רכזות אנימציה

ההדגמה הזו משפרת בהדרגה את חוויית הצמדה של הגלילה באמצעות מעברים שמופעלים על ידי Snaps באמצעות scrollsnapchange.

בודקים אם יש תמיכה באירועים באמצעות קוד ה-JavaScript הבא:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

קלט של סרגל שניתן לגלילה

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

תהליך הכיסוי

ההדגמה הזו מבוססת על שחזור האנימציה המעולה של ברמוס ואן דאם בתהליך ההצגה המפורסם של macOS (גם סרטון הדרכה). באופן ייחודי, scrollSnapChanging משמש להסתרת כותרת האלבום ו-scrollSnapChange משמש להצגת הכותרת. האירועים עוזרים לתזמר הסתרה נחושה של השם הישן והצגה מדורגת של השם החדש.

רעיונות נוספים כדי לעורר השראה ביצירתיות

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

• הפעלת טעינה מדורגת, שנקראת 'Snapchange', הקפיצה רינדור או אחזור נתונים.
• התמונות הממוזערות של רצועת השקפים שמקושרות לתמונה גדולה יותר.
• החלפת מצב בין הפעלה והשהיה של טריילר לסרטון עבור תמונה ממוזערת של סרטון.
• מעקב ב-Analytics
• גלילה בגלילה
• ממשק המשתמש/חוויית המשתמש של גלגל המזל
• יעד הצמדה מקבל הסבר קצר מעוגנת.
• אפשר להקיש כדי לצלם
• הצמדה כדי לחשוף
• צלילים בהקשה
• ממשק משתמש החלקה
• כרטיסיות או קרוסלות שניתן להחליק

מחקרים נוספים

חברי צוות Chrome שמחים לשמוע מה מפתחים עם ממשקי ה-API החדשים האלה, ומקווים שהם יעזרו לייעל את תהליך הגלילה.

מקורות:

• המפרט לשירותי CSS
• הסברים לגלילה באמצעות Snaps
• אוסף CodePen