מאמר זה מדגים את השיטה לעצור את הצפת התוכן ולאפשר גלילה באמצעות CSS.
כיצד להפסיק את הצפת התוכן ולאפשר גלילה?
המטרה לעצור את הצפת התוכן היא שהתוכן יתאים בתוך המיכל שלו ואינו משפיע לרעה על ביצועי האתר. זה יכול להבין בקלות את ההקשר ויכול לשפר את הנגישות לקצה המשתמשים. להסבר מפורט הבה נדון באמצעות דוגמה:
שלב 1: הפעל גלילה עם גלישת תוכן
בתחילה, התחל ביצירת טבלה בתוך קובץ ה-HTML עליה יוחל אפקט הגלילה. נניח שהטבלה כבר נוצרה והיא מורכבת משש שורות ושבע עמודות, וכמה נתוני דמה מסופקים לטבלה:
< שולחן >
< tr >
< ה' > ראש 1 < / ה' >
< ה' > ראש 2 < / ה' >
< ה' > ראש 3 < / ה' >
< ה' > ראש 4 < / ה' >
< ה' > ראש 5 < / ה' >
< ה' > ראש 6 < / ה' >
< ה' > ראש 7 < / ה' >
< / tr >
< tr >
< td > שורה 1 < / td >
< td > שורה 1 < / td >
< td > שורה 1 < / td >
< td > שורה 1 < / td >
< td > שורה 1 < / td >
< td > שורה 1 < / td >
< td > שורה 1 < / td >
< / tr >
< tr >
< td > שורה 2 < / td >
< td > שורה 2 < / td >
< td > שורה 2 < / td >
< td > שורה 2 < / td >
< td > שורה 2 < / td >
< td > שורה 2 < / td >
< td > שורה 2 < / td >
< / tr >
< tr >
< td > שורה 3 < / td >
< td > שורה 3 < / td >
< td > שורה 3 < / td >
< td > שורה 3 < / td >
< td > שורה 3 < / td >
< td > שורה 3 < / td >
< td > שורה 3 < / td >
< / tr >
< tr >
< td > שורה 4 < / td >
< td > שורה 4 < / td >
< td > שורה 4 < / td >
< td > שורה 4 < / td >
< td > שורה 4 < / td >
< td > שורה 4 < / td >
< td > שורה 4 < / td >
< / tr >< tr >
< td > שורה 5 < / td >
< td > שורה 5 < / td >
< td > שורה 5 < / td >
< td > שורה 5 < / td >
< td > שורה 5 < / td >
< td > שורה 5 < / td >
< td > שורה 5 < / td >
< / tr >
< tr >
< td > שורה 6 < / td >
< td > שורה 6 < / td >
< td > שורה 6 < / td >
< td > שורה 6 < / td >
< td > שורה 6 < / td >
< td > שורה 6 < / td >
< td > שורה 6 < / td >
< / tr >
< / שולחן >
לאחר ביצוע קטע הקוד לעיל, דף האינטרנט מופיע כך:
הפלט מציג שנתוני הטבלה הם בפורמט פחות קריא והרבה מקום נרכש על ידי הטבלה.
שלב 2: הגדרת אפקט הצפה וגלילה בקטע הקוד שלמעלה: לאחר ביצוע קטע הקוד לעיל, דף האינטרנט מופיע כך: דף האינטרנט ממחיש שהטבלה צורכת כעת פחות מקום ומונעת מהתוכן לעלות על גדותיו. בנוסף, אפקט הגלילה הופעל. הערה : על פי הגדרה ' הצפה: אוטומטי ' או ' הצפה: גלילה ', משתמשים יכולים לאפשר גלילה עבור תוכן שעולה על גדותיו. בנוסף ' הצפה: נסתר 'ניתן להשתמש כדי למנוע הצפה לחלוטין. מאפייני ה-' overflow-x' ו- 'overflow-y' משמשים כדי לשלוט על הצפה ולאפשר גלילה בציר האופקי והאנכי. זה מונע מהתוכן לעלות על גדותיו ומאפשר גלילה כדי ליצור עיצוב מגיב אינטראקטיבי עבור כל המכשירים. מאמר זה הדגים כיצד לעצור את הצפת התוכן ולאפשר גלילה באמצעות CSS.
לאחר מכן, עטפו את השולחן עם הורה '
.הצפה {
רוֹחַב : 200 פיקסלים ;
גוֹבַה : 200 פיקסלים ;
overflow-x : אוטומטי ;
overflow-y : אוטומטי ;
גלילה-התנהגות : חלק ;
}
סיכום