📚 فهم خاصيتي overflow-x و overflow-y في CSS - دليلك الشامل

اليوم سنتعمق في خاصيتين مهمتين جداً في CSS تتيحان لنا التحكم بشكل دقيق في كيفية تعامل العنصر مع المحتوى الذي يتجاوز حدوده. هاتان الخاصيتان هما overflow-x و overflow-y. إذا كنت قد لاحظت ظهور أشرطة التمرير في مواقع الويب وتساءلت عن كيفية التحكم بها، فهذا الدرس مخصص لك! 🎯

🤔 ما هي مشكلة المحتوى الزائد؟

لنفهم المشكلة التي تحلها هذه الخصائص، تخيل أن لديك صندوقاً (عنصر div مثلاً) بعرض وارتفاع محددين. ماذا يحدث إذا وضعت بداخله محتوى (نصاً أو صورة) أكبر من مساحة هذا الصندوق؟ المحتوى سيتعدى حدود الصندوق! هذا ما نسميه "محتوى زائد" (Overflow).

.container {
  width: 200px;
  height: 100px;
  border: 2px solid blue;
}

<div class="container">
  هذه جملة طويلة جداً جداً جداً تتجاوز العرض المحدد للصندوق بكثير، وكذلك قد يكون هناك الكثير من الأسطر التي تتجاوز الارتفاع المحدد.
</div>

في المثال أعلاه، سيتعدى النص حدود الصندوق الأزرق إلى اليمين وإلى الأسفل.

🧩 الحل: خاصية overflow الأساسية

قبل الحديث عن overflow-x و overflow-y، يجب أن نعرف أن CSS توفر خاصية شاملة اسمها overflow. تقبل هذه الخاصية عدة قيم:

  • visible (الافتراضي): المحتوى الزائد يكون مرئياً خارج حدود العنصر.
  • hidden: يتم إخفاء المحتوى الزائد ولا يمكن رؤيته.
  • scroll: يظهر شريط تمرير (Scrollbar) دائمًا، حتى لو لم يكن هناك محتوى زائد.
  • auto: يظهر شريط التمرير فقط عند الحاجة، أي عندما يكون هناك محتوى زائد فعلاً.
.box {
  width: 200px;
  height: 100px;
  border: 2px solid red;
  overflow: auto; /* شريط التمرير يظهر عند الحاجة فقط */
}

➡️⬇️ التخصص: overflow-x و overflow-y

الخاصية overflow تتحكم في المحتوى الزائد في الاتجاهين الأفقي والرأسي معاً. لكن ماذا لو أردت تحكماً أكثر دقة؟ هنا يأتي دور الخاصيتين الأكثر تخصصاً:

  • overflow-x: تتحكم فقط في المحتوى الزائد على المحور الأفقي (من اليسار إلى اليمين).
  • overflow-y: تتحكم فقط في المحتوى الزائد على المحور الرأسي (من الأعلى إلى الأسفل).

تأخذ كل من هاتين الخاصيتين نفس قيم الخاصية overflow (visible, hidden, scroll, auto).

💡 أمثلة عملية وتطبيقات شائعة

لنطبق ما تعلمناه بأمثلة واضحة:

المثال 1: منع التمرير الأفقي لصفحة ويب

تجنب التمرير الأفقي غير المرغوب فيه لصفحة الويب هو استخدام شائع لـ overflow-x.

body {
  overflow-x: hidden; /* يخفي أي محتوى يتجاوز عرض نافذة المتصفح */
}

المثال 2: إنشاء منطقة ذات تمرير رأسي فقط

لنفترض أننا نريد إنشاء مربع للنص ذو ارتفاع ثابت، وعندما يزيد المحتوى، يظهر شريط التمرير الرأسي فقط.

.scrollable-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow-x: hidden;   /* نمنع التمرير الأفقي */
  overflow-y: auto;     /* نسمح بالتمرير الرأسي عند الحاجة */
}

المثال 3: إنشاء معرض صور أفقي (Horizontal Scroller)

هنا نريد عرض سلسلة من الصور أفقيًا، مع إظهار شريط تمرير أفقي للتنقل بينها.

.horizontal-gallery {
  width: 100%;
  height: 150px;
  white-space: nowrap; /* يمنع الصور من الانتقال لسطر جديد */
  overflow-x: auto;    /* يضيف شريط تمرير أفقي عند الحاجة */
  overflow-y: hidden;  /* يخفي أي تمرير رأسي */
}
.gallery-img {
  height: 100%;
  display: inline-block;
}

🚀 ملخص سريع

  • overflow: تتحكم في المحتوى الزائد في كلا الاتجاهين.
  • overflow-x: تتحكم فقط في المحتوى الزائد أفقيًا (يسار/يمين).
  • overflow-y: تتحكم فقط في المحتوى الزائد رأسيًا (أعلى/أسفل).
  • القيم الشائعة: visible، hidden، scroll، auto.
  • استخدام overflow-x: hidden على <body> وسيلة رائعة لضمان عدم وجود تمرير أفقي غير مرغوب فيه في موقعك.