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

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

Adam Argyle

Kaan Alsan

Yi Gu

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

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

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

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

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

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

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

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

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

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

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

משוב

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