خاصية Overflow-X
آخر تحديث: 2026-09-13
overflow-x خاصية Overflow-X
تتحكم خاصية overflow-x تحديدًا في كيفية معالجة المحتوى الذي يفيض الحاوية أفقيًا وتقبل نفس قيم overflow. القيمة الافتراضية visible تسمح بظهور الفائض. تُستخدم عادةً لتعطيل التمرير الأفقي للصفحة أو لجعل منطقة قابلة للتمرير أفقيًا فقط.
| الفئة | |
|---|---|
| القيمة الأولية | visible |
| موروث | لا |
| ينطبق على | block-container |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
overflow-x: visible | hidden | clip | scroll | auto;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
visible | hidden | scroll | auto | كلمة مفتاحية | معالجة الفائض الأفقي. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow-x | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يؤدي ضبط overflow-x:hidden على body إلى منع أشرطة التمرير الأفقية في الصفحة.
❓ الأسئلة الشائعة
Qكيف أمنع التمرير الأفقي في صفحة؟
Aيؤدي ضبط overflow-x:hidden على html أو body إلى قص الفائض، لكن ذلك يعالج العَرَض فقط. من الأفضل إيجاد السبب الجذري: تحقق مما إذا كان عنصر أعرض من إطار العرض، مثل عرض يتجاوز 100% أو كلمات طويلة أو نص غير ملفوف أو عناصر موضعية، واستخدم أدوات المطور لتحديد أي عنصر فرعي من body يفيض. إصلاح المصدر أكثر موثوقية من إضافة overflow-x:hidden.
Qما الفرق بين overflow-x و overflow؟
Aoverflow هي الاختصار الذي يضبط السلوك الأفقي والرأسي معًا؛ بينما تضبط overflow-x الاتجاه الأفقي فقط. يمكن ضبط المحورين بشكل منفصل، مثلًا overflow-x:hidden; overflow-y:auto. هناك تحذير واحد: عندما يكون أحد المحورين visible والآخر hidden أو auto أو scroll، يُجبر قيمة visible على التغيير إلى auto، لذا لا يمكنك الإبقاء على فيضان visible حقيقي في المحور الآخر في الوقت نفسه.
Qلماذا لا يعمل overflow-x:hidden أحيانًا؟
Aالأسباب الشائعة: أولًا، يتدحرج html و body بشكل مختلف، لذا اضبطه على كلاهما أو على html والـ body أو على html وحده؛ ثانيًا، لا يملك العنصر الأب قيد عرض، فيظل الفرع الأعرض من الأب يفيض؛ ثالثًا، عندما يكون المحور الآخر visible، يُعاد كتابة قيمة visible المتعارضة إلى auto. يظل ضبطه على html,body معًا وإصلاح مصدر الفائض هو الطريق الموثوق.
Qكيف أبني قائمة صور قابلة للتمرير أفقيًا؟
Aأعطِ الحاوية overflow-x:auto مع white-space:nowrap أو display:flex وعرضًا ثابتًا للعناصر الفرعية، فتتمرر الصف أفقيًا. مع flex، أضف flex-shrink:0 للعناصر حتى لا تُضغط. على الهاتف، اقترنها بـ -webkit-overflow-scrolling:touch للحصول على تمرير بالقصور الذاتي سلس، وضع في الاعتبار scroll snap لإحساس أكثر تماسكًا، مما يجعل القائمة تبدو أصلية على أجهزة اللمس.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
