شرح Overflow في CSS — كيف تتحكم في المحتوى الزائد داخل الصناديق؟

عندما يكون المحتوى أكبر من مساحة العنصر، يبدأ ما يسمى بالمحتوى الزائد (Overflow). هنا تأتي خاصية overflow لتحديد كيف يتصرف المتصفح.

إذا كنت تبحث عن شرح overflow في CSS أو الفرق بين overflow hidden و auto أو كيف أحذف scrollbar الأفقي، فهذا الدرس يشرحها عملياً.

ما هي overflow في CSS؟

خاصية overflow تتحكم في سلوك المحتوى الذي يتجاوز حدود العنصر عندما يكون width/height محدوداً.

التعريف البسيط: Overflow في CSS تحدد هل المحتوى الزائد يظهر، يختفي، أو يظهر معه شريط تمرير.

قيم overflow الأساسية في CSS

1) overflow: visible (الافتراضي)

المحتوى الزائد يخرج خارج الصندوق ويظل مرئياً.

.box {
    overflow: visible;
}

النتيجة المتوقعة: المحتوى قد يتداخل مع عناصر أخرى.

2) overflow: hidden

يتم قص المحتوى الزائد ويختفي الجزء الخارج.

.box {
    overflow: hidden;
}

النتيجة المتوقعة: مظهر نظيف بدون محتوى خارج الحدود.

3) overflow: scroll

شريط التمرير يظهر دائماً حتى لو المحتوى ليس كبيراً.

.box {
    overflow: scroll;
}

4) overflow: auto

شريط التمرير يظهر فقط عند الحاجة (الأكثر استخداماً).

.box {
    overflow: auto;
}

ماذا يفعل هذا الكود إجمالاً؟ يسمح لك باختيار السلوك الأنسب للمحتوى الزائد حسب تصميمك.

خطأ شائع: استخدام scroll دائماً رغم أن auto غالباً أنظف.

overflow-x و overflow-y في CSS

يمكنك التحكم في كل محور بشكل مستقل:

• overflow-x: أفقي (يمين/يسار).
• overflow-y: عمودي (أعلى/أسفل).

.container {
    overflow-x: hidden;
    overflow-y: auto;
}

ماذا يفعل هذا الكود؟ يمنع التمرير الأفقي المزعج ويسمح بالتمرير العمودي عند الحاجة.

النتيجة المتوقعة: تجربة استخدام أفضل خصوصاً على الهاتف.

خطأ شائع: إخفاء overflow-x مع وجود عناصر مهمة تتجاوز العرض دون ملاحظة.

متى نستخدم overflow: hidden في CSS؟

• قص المحتوى الزائد داخل بطاقات وصور بزوايا دائرية.
• إزالة scrollbar أفقي غير مرغوب في layout.
• تحديد الحدود المرئية لتأثيرات animation.

متى نستخدم overflow: auto في CSS؟

• صناديق المحتوى الطويل (تعليقات/سجلات/لوحات).
• الجداول أو القوائم الطويلة داخل حاوية ثابتة الارتفاع.
• بديل أنظف من scroll الدائم.

أخطاء شائعة في Overflow in CSS

١) قص محتوى مهم بدون قصد: بسبب overflow: hidden.

٢) scrollbar دائم مزعج: استخدام scroll بدل auto.

٣) تجاهل overflow-x: يؤدي لظهور شريط سفلي مزعج في الموبايل.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما الفرق بين overflow hidden و overflow auto في CSS؟

hidden يقص المحتوى الزائد، بينما auto يظهر scrollbar فقط عند الحاجة.

كيف أخفي شريط التمرير الأفقي في CSS؟

غالباً باستخدام overflow-x: hidden; مع مراجعة سبب الزيادة في العرض.

متى أستخدم overflow scroll في CSS؟

عند رغبتك بإظهار scrollbar دائماً، لكنه أقل شيوعاً من auto.

لماذا المحتوى يخرج خارج div في CSS؟

لأن القيمة الافتراضية غالباً visible أو لأن العنصر أصغر من محتواه.

هل overflow يؤثر على تجربة المستخدم؟

نعم، بشكل مباشر. اختيار قيمة صحيحة يمنع الفوضى البصرية ويحسن القراءة.