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

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

יש שתי אפשרויות חיתוך שונות ב-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;
}

שימוש בנכסי overflow

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

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

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

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

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

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

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

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

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

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

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

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

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

root-scroller לעומת implicit-scroller

יכול להיות שתבחינו שחלק מהגלילים כוללים התנהגות של 'משיכה לרענון' והתנהגויות מיוחדות אחרות, במיוחד כשאתם מפתחים אפליקציות לנייד ולאפליקציות היברידיות. התנהגות הגלילה הזו מתרחשת בגלילה ברמה הבסיסית. בדף יכול להיות רק סרגל גלילה אחד ברמה הבסיסית. כברירת מחדל, הרכיב documentElement הוא רכיב הגלילה ברמה הבסיסית של הדף. עם זאת, אם משנים את הרכיב הזה, אפשר להחיל את ההתנהגויות המיוחדות על רכיבי גלילה אחרים מלבד documentElement. אנחנו קוראים לרכיב הגלילה החדש הזה רכיב הגלילה ברמה הבסיסית (implicit root scroller).

כדי ליצור סרגל גלילה ברמה הבסיסית, אפשר להשתמש בהצגת סרגל גלילה. לשם כך, ממקמים מאגר כקבוע, מוודאים שהוא מכסה את כל אזור התצוגה ומגדירים לו את הערך z-index בראש הרשימה עם סרגל גלילה. כאן אפשר לראות את ההבדל בין גלילה ברמה הבסיסית לבין גלילה משתמעת בתצוגת עץ.

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

scroll-behavior

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 15.4.

Source

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

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

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

overscroll-behavior

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

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

בדיקת ההבנה

בדיקת הידע שלכם בנושא Overflow

האם חריגה מעבר לטקסט זהה לחריגה מעבר לאלמנט?

FALSE
TRUE

מאפיין overflow מקבל 2 מילות מפתח. מילת המפתח הראשונה מיועדת לאיזה ציר?

לאורך
אופקי

איזה מקום במודל התיבה סרגל הגלילה תופס כשהוא מוצג ובשורה?

תיבה עם ריווח
תיבה עם גבול
תיבת תוכן
תיבת שוליים

כדי לתפוס תנופה נוספת מהגלילה בתוך סרגל גלילה מרובד סמוי, באיזה מאפיין כדאי להשתמש?

overscroll-effect
scroll-padding
overscroll-behavior
scroll-hint
scroll-behavior

משאבים

Overflow And Data Loss In CSS מ-Smashing Magazine