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

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

Adam Argyle

Kaan Alsan

Yi Gu

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

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

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

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

רקע

CSS Scroll Snap

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

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

שני תרחישים נפוצים לדוגמה לשימוש ב-scroll snap הם מאמרים שמחולקים לדפים וקרוסלות של תמונות.

חסרונות

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

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

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

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

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

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

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

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

בעזרת התכונה Snap after changes (ביצוע שינויים בפריסה), מפתחים יכולים להטמיע סרגלי גלילה במיקום קבוע עם מספר שורות של CSS:

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

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

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

עבודות עתידיות

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

משוב

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