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

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

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

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

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

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

הדגשת המלצה

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

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

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

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

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

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

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

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