توضح هذه المقالة استخدام خاصية CSS overflow-y مع العديد من الأمثلة.
كيفية استخدام خاصية Overflow-y في CSS؟
CSS ' تجاوز ذ 'للتحكم في تدفق المحتوى على طول المحور العرضي داخل عنصر ما. يحدد ما إذا كان سيتم قص المحتوى أو إضافة شريط تمرير عندما يتجاوز المحتوى ارتفاع الحاوية. القيم المحتملة لهذه الخاصية هي ' مرئي '،' مختفي '،' التمرير '، و ' آلي '.
دعنا نزور الأمثلة أدناه للحصول على عرض أفضل لخاصية overflow-y:
مثال 1: استخدام Visible كقيمة لخاصية Overflow-y
ال ' مرئي تسمح قيمة 'للمحتوى بالتجاوز من الحاوية ولا تضيف أي قطع أو أشرطة تمرير. قم بزيارة كتلة التعليمات البرمجية العملية أدناه:
<فئة div = 'الأبوين' أسلوب = 'تجاوز- ص: مرئي ؛' >
<فئة div = 'childContent' > هذا مجرد دمية محتوى تُستخدم لإثبات خاصية overflow-y عند ضبطها على أن تكون مرئية.
>
>
>
وصف كتلة التعليمات البرمجية أعلاه:
- أولاً ، قم بتعيين قيمة ' الأبوين 'إلى' فصل 'واستخدام' أسلوب ' يصف.
- بالإضافة إلى ذلك ، قدِّم قيمة ' مرئي 'إلى CSS' تجاوز ذ ' ملكية. وضبطها على ' أسلوب ”لجعل تصميم CSS يعمل.
- بعد ذلك ، قم بإنشاء ' شعبة 'وتخصيص فئة من' محتوى الطفل '. أيضا ، قم بتوفير بيانات وهمية لها.
الآن ، استخدم خصائص CSS لتحسين التصور الذي يساعد في فهم أفضل لخاصية CSS overflow-y:
.الأبوين {عرض : 200 بكسل ؛
ارتفاع : 150 بكسل ؛
حدود : 1 بكسل صلب أسود ؛
}
.childContent {
ارتفاع : 300 بكسل ؛
لون الخلفية : lightblue ؛
}
فيما يلي وصف خصائص CSS:
- لأول مرة ' الأبوين 'فئة محددة وقيم' 200 بكسل '،' 150 بكسل '، و ' 1 بكسل أسود خالص 'إلى CSS' عرض '،' ارتفاع '، و ' حدود '، على التوالي.
- بعد ذلك ، حدد ' محتوى الطفل 'فئة وضبط قيم' 300 بكسل ' و ' lightblue 'إلى CSS' ارتفاع ' و ' لون الخلفية '، على التوالي. يمتد هذا الفصل إلى ' الأبوين 'فئة يتحكم فيها CSS' تجاوز ' ملكية.
بعد تجميع مقتطفات التعليمات البرمجية ، تظهر صفحة الويب على النحو التالي:
تعرض اللقطة أن محتوى الفائض أصبح مرئيًا الآن ولا تتم إضافة شريط التمرير أو القطع افتراضيًا.
المثال 2: استخدام Hidden كقيمة لخاصية Overflow-y
ال ' تجاوز ذ 'بقيمة' مختفي 'يخفي كل المحتوى الذي ينتقل خارج الحاوية الرئيسية الخاصة به. لا تضيف هذه الخاصية أشرطة تمرير بدلاً من ذلك قامت بقص المحتوى الزائد:
<فئة div = 'الأبوين' أسلوب = 'overflow-y: hidden؛' >
<فئة div = 'childContent' > هذا مجرد دمية محتوى تُستخدم لإثبات خاصية overflow-y عند ضبطها على 'مخفي'. هذا مجرد دمية محتوى تُستخدم لإثبات خاصية overflow-y عند ضبطها على 'مخفي'.
>
>
يحتوي مقتطف الشفرة أعلاه على:
- أولاً ، يتم إدخال نفس الشفرة مرة أخرى مع زيادة المحتوى الوهمي داخل عنصر div الداخلي.
- بعد ذلك ، قم بتغيير قيمة ' تجاوز ذ 'الخاصية إلى' مختفي 'إلى' 'العلامة التي تحتوي على فئة' الأبوين '.
بعد إعادة عرض صفحة الويب تبدو كالتالي:
تعرض اللقطة أن محتوى الفائض قد تم قصه.
مثال 3: استخدام Scroll كقيمة لخاصية Overflow-y
تحديد قيمة ' تجاوز ذ 'إلى' التمرير 'للمستخدم النهائي بالتمرير عبر ملف
المحتوى الذي يفيض عليه. دعنا نزور كتلة الكود أدناه:
<فئة div = 'الأبوين' أسلوب = 'overflow-y: scroll؛' >
<فئة div = 'childContent' > هذا مجرد دمية محتوى تُستخدم لإثبات خاصية overflow-y عند ضبطها على أن تكون مرئية. هذا مجرد دمية محتوى تُستخدم لإثبات خاصية overflow-y عند ضبطها على أن تكون مرئية.
>
>في كتلة التعليمات البرمجية أعلاه:
- أولاً ، تم إدراج بنية HTML نفسها داخل ' <الجسم> ' بطاقة شعار.
- بعد ذلك ، قم بتغيير قيمة ' تجاوز ذ 'إلى' التمرير '. هذا يسمح ' الأبوين ”div لتمكين تأثير التمرير للتحكم في المحتوى الفائض.
بعد تجميع كتلة التعليمات البرمجية أعلاه ، تظهر صفحة الويب على النحو التالي:
يوضح المعرف أعلاه أن تأثير التمرير كان متاحًا للتحكم في المحتوى الفائض.
مثال 4: استخدام Auto كقيمة لخاصية Overflow-y
في هذا المثال ، يمكن للمستخدمين إضافة شريط تمرير فقط إذا كان المحتوى لا يتناسب مع الحاوية. أيضًا ، إذا لم يتجاوز المحتوى ، فلن تتم إضافة شريط التمرير. من الممكن من خلال توفير قيمة ' آلي 'إلى CSS' تجاوز ذ ' ملكية:
<فئة div = 'الأبوين' أسلوب = 'overflow-y: auto؛' >
<فئة div = 'childContent' > هذا مجرد دمية محتوى تُستخدم لإثبات خاصية overflow-y عند ضبطها على أن تكون مرئية. هذا مجرد دمية محتوى تُستخدم لإثبات خاصية overflow-y عند ضبطها على أن تكون مرئية.
>
>في كتلة التعليمات البرمجية أعلاه:
- أولاً ، أدخل ملف HTML نفسه داخل ' <الجسم> ' بطاقة شعار.
- بعد ذلك ، قم بتحديث قيمة ' تجاوز ذ 'الخاصية إلى' آلي '. يتيح تأثير التمرير بالنسبة إلى الطول الرأسي للمحتوى.
بعد انتهاء عملية التجميع ، تعمل صفحة الويب على النحو التالي:
يعرض gif أعلاه خاصية overflow التي مكنت شريط التمرير وفقًا لطول المحتوى.
خاتمة
CSS ' تجاوز ذ 'للتحكم في فائض المحتوى على طول المحور العرضي داخل عنصر ما. تتحكم خاصية overflow-y في المحتوى وفقًا للقيمة المحددة المقدمة لخصائص overflow-y. ال ' مرئي تعرض القيمة 'المحتوى الزائد ،' مختفي 'القيمة يخفي محتوى الفائض ، و' التمرير يضيف قيمة 'شريط تمرير للتحكم في المحتوى. وإذا كانت القيمة ' آلي 'يضيف شريط التمرير أو يزيل وفقًا لطول المحتوى.