توضح هذه المقالة طريقة منع فائض المحتوى وتمكين التمرير باستخدام CSS.
كيفية إيقاف فائض المحتوى وتمكين التمرير؟
الغرض من منع فائض المحتوى هو أن المحتوى يناسب الحاوية الخاصة به ولا يؤثر سلبًا على أداء موقع الويب. يمكنه فهم السياق بسهولة ويمكنه تحسين إمكانية الوصول لنهاية المستخدمين. للحصول على شرح مفصل دعونا نناقش من خلال مثال:
الخطوة 1: تمكين التمرير باستخدام Content Overflow
في البداية ، ابدأ بإنشاء جدول داخل ملف HTML سيتم تطبيق تأثير التمرير عليه. لنفترض أن الجدول قد تم إنشاؤه بالفعل ، ويتكون من ستة صفوف وسبعة أعمدة ، ويتم توفير بعض البيانات الوهمية للجدول:
< طاولة >
< آر >
< ذ > رئيس 1 < / ذ >
< ذ > رئيس 2 < / ذ >
< ذ > رئيس 3 < / ذ >
< ذ > رئيس 4 < / ذ >
< ذ > رئيس 5 < / ذ >
< ذ > رئيس 6 < / ذ >
< ذ > رئيس 7 < / ذ >
< / آر >
< آر >
< td > الصف 1 < / td >
< td > الصف 1 < / td >
< td > الصف 1 < / td >
< td > الصف 1 < / td >
< td > الصف 1 < / td >
< td > الصف 1 < / td >
< td > الصف 1 < / td >
< / آر >
< آر >
< td > الصف 2 < / td >
< td > الصف 2 < / td >
< td > الصف 2 < / td >
< td > الصف 2 < / td >
< td > الصف 2 < / td >
< td > الصف 2 < / td >
< td > الصف 2 < / td >
< / آر >
< آر >
< td > الصف 3 < / td >
< td > الصف 3 < / td >
< td > الصف 3 < / td >
< td > الصف 3 < / td >
< td > الصف 3 < / td >
< td > الصف 3 < / td >
< td > الصف 3 < / td >
< / آر >
< آر >
< td > الصف 4 < / td >
< td > الصف 4 < / td >
< td > الصف 4 < / td >
< td > الصف 4 < / td >
< td > الصف 4 < / td >
< td > الصف 4 < / td >
< td > الصف 4 < / td >
< / آر > < آر >
< td > الصف 5 < / td >
< td > الصف 5 < / td >
< td > الصف 5 < / td >
< td > الصف 5 < / td >
< td > الصف 5 < / td >
< td > الصف 5 < / td >
< td > الصف 5 < / td >
< / آر >
< آر >
< td > الصف 6 < / td >
< td > الصف 6 < / td >
< td > الصف 6 < / td >
< td > الصف 6 < / td >
< td > الصف 6 < / td >
< td > الصف 6 < / td >
< td > الصف 6 < / td >
< / آر >
< / طاولة >
بعد تنفيذ مقتطف الشفرة أعلاه ، تظهر صفحة الويب على النحو التالي:
يعرض الإخراج أن بيانات الجدول بتنسيق أقل قابلية للقراءة ويتم الحصول على مساحة كبيرة بالجدول.
الخطوة 2: ضبط تأثير الفائض والتمرير في مقتطف الشفرة أعلاه: بعد تنفيذ مقتطف الشفرة أعلاه ، تظهر صفحة الويب على النحو التالي: توضح صفحة الويب أن الجدول يستهلك الآن مساحة أقل ويوقف المحتوى من الفائض. بالإضافة إلى ذلك ، تم تمكين تأثير التمرير. ملحوظة : من خلال تحديد ' تجاوز: تلقائي ' أو ' تجاوز: التمرير '، يمكن للمستخدمين تمكين التمرير لفيضان المحتوى. بالإضافة إلى ذلك ، إخفاء الفائض ”لمنع الفائض تمامًا. يتم استخدام خصائص 'overflow-x' و 'overflow-y' للتحكم في التدفق الزائد وتمكين التمرير على المحورين الأفقي والرأسي. إنه يمنع المحتوى من التدفق الزائد ويتيح التمرير لعمل تصميم تفاعلي سريع الاستجابة لجميع الأجهزة. لقد أوضحت هذه المقالة كيفية منع فائض المحتوى وتمكين التمرير باستخدام CSS.
بعد ذلك ، لف الطاولة مع أحد الوالدين '
.overflow {
عرض : 200 بكسل ؛
ارتفاع : 200 بكسل ؛
تجاوز- x : آلي ؛
تجاوز ذ : آلي ؛
التمرير السلوك : سلس ؛
}
خاتمة