הצמדת גלילה לאחר שינוי הפריסה

החל מגרסה 81 של Chrome, אין יותר צורך להוסיף פונקציות event listener כדי לאלץ לשנות.

Adam Argyle

Kaan Alsan

Yi Gu

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

יכולת פעולה הדדית

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

Chrome הוא כרגע הדפדפן היחיד שהטמיע הצמדת גלילה אחרי הפריסה שינויים. ב-Firefox יש כרטיס פתוח לתאריך בהטמעה הזו, וב-Safari יש גם כרטיס לצילום מחדש אחרי התוכן משתנה. בינתיים, אפשר לדמות את ההתנהגות הזו על ידי הוספת את הקוד הבא ל-event listener כדי לאלץ ביצוע הצמדה (Snapping): javascript scroller.scrollBy(0,0); עם זאת, זה לא מבטיח שהגלילה תיצמד בחזרה לרכיב מסוים.

רקע

צילום מסך של גלילה ב-CSS

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

• מונע מיקומי גלילה מביכים במהלך הגלילה.
• יוצר את ההשפעה של דפדוף בתוכן.

מאמרים עם עימוד וקרוסלות תמונות הם שני תרחישים נפוצים לדוגמה לגלילה Snaps.

חסרונות

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

• שינוי גודל של חלון
• סיבוב מכשיר
• פתיחת כלי פיתוח

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

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

תמיכה מובנית בצילום מחדש אחרי שינויי פריסה ב-Chrome 81

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

אפשר לראות צילום מחדש לאחר שינויי פריסה המפרט. פרטים.

דוגמה: פסי גלילה במיקום קבוע

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

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

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

עבודה עתידית

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

משוב

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