אפשרויות נוספות

The CSS Podcast - 034: Overflow

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

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

גלישת שורה אחת עם text-overflow

משתמשים במאפיין text-overflow בכל אלמנט שמכיל צמתים של טקסט, למשל פסקה, <p>. המאפיין הזה מציין איך הטקסט יופיע אם הוא לא נכנס לשטח הזמין של האלמנט. כל טקסט ה-HTML שניתן לצפייה בדף נמצא בצמתי טקסט. כדי להשתמש ב-text-overflow, צריך להגדיר שורת טקסט אחת לא עטופה, ולכן צריך גם להגדיר את overflow ל-hidden ולציין ערך white-space שמונע עטיפה.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

שימוש בנכסי עודפים

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

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

גלילה בציר האנכי והאופקי

המאפיין overflow-y שולט בגלישה הפיזית לאורך הציר האנכי של חלון התצוגה במכשיר, ולכן הוא מאפשר גלילה למעלה ולמטה.

המאפיין overflow-x שולט על הגלישה מעבר לגבולות לאורך הציר האופקי של חלון התצוגה במכשיר, ולכן הוא מאפשר גלילה שמאלה וימינה.

מאפיינים לוגיים לכיוון הגלילה

המאפיינים overflow-inline ו-overflow-block מגדירים את הגלישה על סמך כיוון המסמך ואופן הכתיבה.

הקיצור overflow

הקיצור overflow מגדיר את הסגנונות overflow-x ו-overflow-y בשורה אחת:

overflow: hidden scroll;

אם מציינים שתי מילות מפתח, הראשונה חלה על overflow-x והשנייה על overflow-y. אחרת, גם overflow-x וגם overflow-y משתמשים באותו ערך.

ערכים

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

‫overflow: visible (ברירת מחדל)

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

overflow: hidden

‫

overflow: hidden התוכן נחתך בכיוון שצוין, ולא מוצגים פסי גלילה כדי להציג אותו.

overflow: scroll

‫

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

overflow: clip

בדומה ל-overflow: hidden, התוכן עם overflow: clip נחתך לתיבת הריפוד של הרכיב. ההבדל בין clip לבין hidden הוא שמילת המפתח clip אוסרת גם על כל הגלילה, כולל גלילה פרוגרמטית.

overflow: auto

לבסוף, הערך הנפוץ ביותר, overflow: auto. כך מכבדים את העדפות המשתמש ומציגים את סרגלי הגלילה אם צריך, אבל מסתירים אותם כברירת מחדל, והאחריות לגלילה היא של המשתמש והדפדפן.

גלילה וגלישה

הרבה מההתנהגויות האלה של overflow יוצרות פס גלילה, אבל יש כמה התנהגויות ומאפיינים ספציפיים של גלילה שיכולים לעזור לכם לשלוט בגלילה במיכל הגלישה.

גלילה ונגישות

חשוב לוודא שאפשר להתמקד באזור הגלילה, כדי שמשתמש במקלדת יוכל להשתמש במקש Tab כדי להגיע לתיבה, ואז להשתמש במקשי החיצים כדי לגלול.

כדי לאפשר לתיבת גלילה לקבל מיקוד, מוסיפים את tabindex="0", שם עם המאפיין aria-labelledby ומאפיין role מתאים. לדוגמה:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

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

במאמר Using CSS to Enforce Accessibility (שימוש ב-CSS כדי לאכוף נגישות), אדריאן רוסלי מדגים איך CSS יכול לעזור למנוע רגרסיות בנגישות. לדוגמה, כדי להפעיל גלילה ולהוסיף את אינדיקטור המיקוד רק אם נעשה שימוש במאפיינים הנכונים. הכללים הבאים יאפשרו גלילה בתיבה רק אם יש לה מאפיינים tabindex, aria-labelledby ו-role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

מיקום סרגל הגלילה בתוך מודל התיבה

אם הערך של inline הוא לא overlaid, סרגלי הגלילה תופסים מקום בתיבת הריפוד, ויכול להיות שלא יהיה להם מספיק מקום. vexpand more on this potential source of layout shift.

רכיב לגלילה ברמת הבסיס לעומת רכיב לגלילה מרומז

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

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

עיצוב סרגל הגלילה

אתם יכולים לעצב את סרגל הגלילה כך שיתאים לעיצוב של האתר. ‫scrollbar-color מגדיר את הצבע של האזור שאפשר ללחוץ עליו כדי לגרור את פס הגלילה ושל השוליים שלו.

כדי לשנות את הרוחב של סרגל הגלילה, משתמשים ב-scrollbar-width. אי אפשר להגדיר את זה לאורך שרירותי, אבל אפשר לציין שרוצים thin או none.

scroll-behavior

‫scroll-behavior מאפשרת להפעיל גלילה לאלמנטים שנשלטת על ידי הדפדפן. כך תוכלו לציין איך המערכת מטפלת בניווט בתוך הדף, כמו .scrollTo() או קישורים.

המאפיין הזה שימושי במיוחד בשילוב עם prefers-reduced-motion כדי לציין את התנהגות הגלילה על סמך העדפות המשתמש.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

אם הגעתם פעם לסוף של שכבת-על מודאלית, המשכתם לגלול והדף שמתחת לשכבת-העל זז, זהו שרשור הגלילה, או העברה למאגר הגלילה של רכיב האב. המאפיין overscroll-behavior מאפשר למנוע גלילה של תוכן שגולש אל מחוץ לקונטיינר אב (תופעה שנקראת שרשור גלילה).

גלילה עם נקודות עצירה (scroll snapping)

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

הגדרת מאגר הגלילה

כדי להפעיל את התכונה 'הצמדה לגלילה', מוסיפים את scroll-snap-type למאגר הגלילה. קודם מגדירים את הציר שבו יתרחש מעבר אוטומטי לנקודת עצירה. זה יכול להיות נכס לוגי (block או inline), נכס פיזי (x או y) או both.

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

.scroll-container {
    scroll-snap-type: block mandatory;
}

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

שליטה ברכיבים שאפשר להצמיד

כדי להגדיר אלמנט כאלמנט שניתן להצמדה, מגדירים את המאפיין scroll-snap-align לערך start, end או center. אם כיוון ההצמדה לגלילה הוא both, אפשר להגדיר שני ערכים. המאפיין הזה קובע אם קצה של הרכיב יתיישר עם קצה אזור הגלילה, או אם הוא יוצג במרכז.

אפשר לשנות את המרווח סביב הקצוות של האלמנט המוצמד באמצעות scroll-margin:

המאפיין scroll-margin משמש גם להגדרת הריווח הפנימי כשגוללים לרכיב:

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

בדיקת ההבנה

משאבים

Overflow And Data Loss In CSS from Smashing Magazine