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

Adam Argyle

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

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

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

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

scrollSnapChange

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

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. הערך של המאפיין יהיה צומת הרכיב.

פרטים ייחודיים ל-scrollSnapChange

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

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

האירוע לא יופעל אם יעד ה-snap לא השתנה

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

פרטים ייחודיים ל-scrollSnapChanging

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

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

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

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

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

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

התבניות הבאות ממחישות כמה תרחישים לדוגמה שיעזרו לכם להתחיל לייצר תוצאות מיד.

הדגשת המלצה

בדוגמה הזו, התיעוד של המלצה ממוקד בהמלצה עצמה או מקדם אותה.

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

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

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

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

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

קלט של סרגל לגלילה

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

תהליך הכיסוי

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

רעיונות נוספים ליצירתיות

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

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

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

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

מקורות:

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