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

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

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

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

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

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

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

חסרונות

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

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

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

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

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

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

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

מיקום ההצמדה אבד

סיבוב מכשיר לא משמר את מיקומי ההצמדה ב-Chrome 80. אחרי שגוללים לשקף NOPE ומשנים את כיוון התצוגה של המכשיר מ'לאורך' ל'לרוחב', מוצג מסך ריק. המשמעות היא שהמיקום של הצמדת הגלילה אבד.

מיקום ההצמדה נשמר

סיבוב מכשיר כן משמר את מיקומי ההצמדה ב-Chrome 81. השקף שבו כתוב NOPE נשאר בתצוגה על אף שכיוון המכשיר משתנה כמה פעמים.

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

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

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

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

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

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

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

הוספה של הודעה חדשה גורמת להצמדה מחדש, מה שמאפשר לה להידבק לתחתית Chrome 81.

עבודה עתידית

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

משוב

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