מאמר זה מדגים את השימוש במאפיין CSS overflow-y עם דוגמאות רבות.
כיצד להשתמש ב-Overflow-y Property ב-CSS?
ה-CSS ' overflow-y מאפיין משמש כדי לשלוט על הצפת התוכן לאורך הציר הצולב בתוך אלמנט. הוא מציין אם לחתוך את התוכן או להוסיף פס גלילה כאשר התוכן חורג מגובה המיכל. הערכים האפשריים עבור נכס זה הם ' גלוי ', ' מוּסתָר ', ' גְלִילָה ', ו' אוטומטי '.
הבה נבקר בדוגמאות שלהלן להדגמה טובה יותר של תכונת ההצפה-y:
דוגמה 1: שימוש ב-Visible כערך עבור מאפיין Overflow-y
ה ' גלוי ערך ' מאפשר לתוכן לעלות על גדותיו מהמיכל ואינו מוסיף שום גזירה או פסי גלילה. בקר בגוש הקוד המעשי שלהלן:
>
>
>
התיאור של בלוק הקוד לעיל:
- ראשית, הקצה ערך של ' הוֹרֶה ' אל ה ' מעמד ' תכונה והשתמש ב' סִגְנוֹן ' תכונה.
- בנוסף, ספק את הערך של ' גלוי 'ל-CSS' overflow-y ' תכונה. והגדר אותו שווה ל' סִגְנוֹן ' תכונה לגרום לסגנון ה-CSS לעבוד.
- לאחר מכן, צור 'מקונן' div ' רכיב ולהקצות לו מחלקה של ' תוכן ילד '. כמו כן, ספק לו נתוני דמה.
כעת, השתמש במאפייני ה-CSS כדי לשפר את ההדמיה אשר מסייעת בהבנה טובה יותר של מאפיין ה-CSS overflow-y:
.הוֹרֶה {רוֹחַב : 200 פיקסלים ;
גוֹבַה : 150 פיקסלים ;
גבול : 1 פיקסלים מוצק שָׁחוֹר ;
}
.childContent {
גוֹבַה : 300 פיקסלים ;
צבע רקע : כחול בהיר ;
}
התיאור של מאפייני CSS ניתן להלן:
- קודם ה ' הוֹרֶה נבחרה המחלקה והערכים של ' 200 פיקסלים ', ' 150 פיקסלים ', ו' 1 פיקסלים שחור מלא ' מוקצים ל-CSS ' רוֹחַב ', ' גוֹבַה ', ו' גבול ” נכסים, בהתאמה.
- לאחר מכן, בחר את ' תוכן ילד ' מחלקה וקבע את הערכים של ' 300 פיקסלים ' ו' כחול בהיר 'ל-CSS' גוֹבַה ' ו' צבע רקע ” נכסים, בהתאמה. שיעור זה מורחב ל' הוֹרֶה ' מחלקה הנשלטת על ידי ה-CSS ' הצפה ' תכונה.
לאחר הידור של קטעי קוד, דף האינטרנט מופיע כך:
תמונת המצב מציגה שתוכן הגלישה נראה כעת וסרגל הגלילה או הגזירה אינם מתווספים כברירת מחדל.
דוגמה 2: שימוש ב-Hidden כערך עבור מאפיין Overflow-y
ה ' overflow-y 'נכס עם ערך של ' מוּסתָר ' מסתיר את כל התוכן שזז מחוץ למיכל האב שלו. מאפיין זה אינו מוסיף פסי גלילה במקום זאת, הוא חתך את התוכן שהוצף:
>
>
קטע הקוד שלמעלה מכיל:
- ראשית, אותו קוד מוכנס שוב עם עלייה של תוכן הדמה הממוקם בתוך אלמנט ה-div הפנימי.
- לאחר מכן, שנה את הערך של ' overflow-y 'נכס ל' מוּסתָר ' אל ה ' ' תג בעל שיעור של ' הוֹרֶה '.
לאחר עיבוד מחדש דף האינטרנט נראה כך:
תמונת המצב מציגה שתוכן הגלישה נחתך.
דוגמה 3: שימוש בגלילה כערך עבור מאפיין Overflow-y
הגדרת הערך של ' overflow-y נכס ל' גְלִילָה ' מאפשר למשתמש הקצה לגלול דרך ה
תוכן שעולה על גדותיו. תן לנו לבקר בגוש הקוד שלהלן:
= 'הוֹרֶה' סִגְנוֹן = 'overflow-y: scroll;' >
= 'תוכן ילדים' > זה פשוט דמה תוֹכֶן משמש להדגמה של המאפיין overflow-y כאשר הוא מוגדר ל-Gלוי. זה פשוט דמה תוֹכֶן משמש להדגמה של המאפיין overflow-y כאשר הוא מוגדר ל-Gלוי.
>
>בגוש הקוד שלמעלה:
- ראשית, אותו מבנה HTML הוכנס בתוך ' <גוף> 'תג.
- לאחר מכן, שנה את הערך של ' overflow-y נכס ל' גְלִילָה '. זה מאפשר את ' הוֹרֶה ” div כדי לאפשר את אפקט הגלילה כדי לשלוט בתוכן המוצף.
לאחר הידור של בלוק הקוד לעיל, דף האינטרנט מופיע כך:
ה-GID שלמעלה ממחיש שאפקט הגלילה היה זמין לשליטה בתוכן המוצף.
דוגמה 4: שימוש באוטו כערך עבור מאפיין Overflow-y
בדוגמה זו, משתמשים יכולים להוסיף פס גלילה רק אם התוכן אינו מתאים למכל. כמו כן, אם התוכן לא יעלה על גדותיו, פס הגלילה לא יתווסף. זה אפשרי על ידי מתן הערך של ' אוטומטי 'ל-CSS' overflow-y ' תכונה:
= 'הוֹרֶה' סִגְנוֹן = 'overflow-y: auto;' >
= 'תוכן ילדים' > זה פשוט דמה תוֹכֶן משמש להדגמה של המאפיין overflow-y כאשר הוא מוגדר ל-Gלוי. זה פשוט דמה תוֹכֶן משמש להדגמה של המאפיין overflow-y כאשר הוא מוגדר ל-Gלוי.
>
>בגוש הקוד שלמעלה:
- ראשית, הכנס את אותו קובץ HTML בתוך ' <גוף> 'תג.
- לאחר מכן, עדכן את הערך של ' overflow-y 'נכס ל' אוטומטי '. זה מאפשר את אפקט הגלילה ביחס לאורך האנכי של התוכן.
לאחר סיום תהליך ההידור, דף האינטרנט פועל כך:
ה-GIF שלמעלה מציג את מאפיין ה-overflow שאפשר את סרגל הגלילה בהתאם לאורך התוכן.
סיכום
ה-CSS ' overflow-y 'מאפיין משמש כדי לשלוט על התוכן המוצף לאורך הציר הצולב בתוך אלמנט. המאפיין overflow-y שולט בתוכן בהתאם לערך הספציפי המסופק למאפייני overflow-y. ה ' חָזוּתִי ערך ' מציג את התוכן שוצף על גדותיו, הערך ' מוּסתָר הערך מסתיר את תוכן הגלישה, והערך ' גְלִילָה ” ערך מוסיף פס גלילה כדי לשלוט בתוכן. ואם הערך הוא ' אוטומטי סרגל הגלילה מוסיף או מסיר לפי אורך התוכן.