תודה שצפית ב-Google I/O! צפייה בתוכן על פי דרישה.

דף זה תורגם על ידי Cloud Translation API.

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

Adam Argyle

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

תמיכה בדפדפנים

מקור

תמיכה בדפדפן

מקור

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

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

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

אפשר לנסות את זה
https://codepen.io/web-dot-dev/pen/jOjaaEP

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

scrollSnapChange

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

אחרי שהגלילה נעצרת.
לפני 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')
}

https://codepen.io/web-dot-dev/pen/dyBZZPe

הצגת הכותרת של הפריט שנצמד

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

Snap שינוי
https://codepen.io/web-dot-dev/pen/wvLPPBL

Snap שינוי
https://codepen.io/web-dot-dev/pen/QWXOObw

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

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

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

https://codepen.io/web-dot-dev/pen/rNEYYVj

הצמדה גם בציר x וגם בציר y בפס גלילה

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

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

https://codepen.io/web-dot-dev/pen/qBzVVdp

שני גלילי גלילה מקושרים

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

https://codepen.io/web-dot-dev/pen/YzoEEXj

בוחר הצבעים OKLCH

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

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

https://codepen.io/web-dot-dev/pen/OJeOOVG

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

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

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

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

https://codepen.io/web-dot-dev/pen/MWMOOae

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

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

https://codepen.io/web-dot-dev/pen/LYKOOpd

תהליך הכיסוי

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

https://codepen.io/web-dot-dev/pen/Bagmmog

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

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

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

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

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