خاصية Overflow-Y
آخر تحديث: 2026-09-13
overflow-y خاصية Overflow-Y
تتحكم خاصية overflow-y تحديدًا في كيفية معالجة المحتوى الذي يفيض الحاوية رأسيًا وتقبل نفس قيم overflow. القيمة الافتراضية visible تسمح بظهور الفائض. وهي أكثر ضوابط الفائض استخدامًا وتُقترن غالبًا بـ max-height لمناطق قابلة للتمرير بارتفاع ثابت.
| الفئة | |
|---|---|
| القيمة الأولية | visible |
| موروث | لا |
| ينطبق على | block-container |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
overflow-y: visible | hidden | clip | scroll | auto;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
visible | hidden | scroll | auto | كلمة مفتاحية | معالجة الفائض الرأسي. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow-y | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يخفي overflow-y:auto شريط التمرير عندما لا يفيض المحتوى ويعرضه فقط عندما يفيض، مما يبدو أفضل من scroll.
❓ الأسئلة الشائعة
Qكيف أجعل محتوى عنصر div يتمرر عندما يفيض؟
Aأعطِ الـ div حدًا للارتفاع plus overflow-y:auto، مثلًا .list { max-height:300px; overflow-y:auto; }. عندما يتجاوز المحتوى الارتفاع يظهر شريط تمرير رأسي؛ وعندما لا يتجاوز لا يظهر. تفضل max-height على height حتى لا يترك المحتوى القصير مساحة فارغة. هذا النمط القياسي لنوافذ الدردشة وقوائم الإشعارات ولوحات التمرير المماثلة، ويتدهور بسلاسة نظرًا لأن الحاوية ببساطة تتوسع عند عدم دعم الفائض.
Qماذا يفعل overflow-y:hidden؟
Aيُقص المحتوى الذي يفيض رأسيًا ويُخفى، ولا يمكن للمستخدمين التمرير لرؤية الجزء المقطوع. يناسب مناطق عرض ثابتة حيث يُضمن احتواء المحتوى، مثل لافتة بارتفاع ثابت، أو مناطق ذات تمرير يتحكم به JS. لاحظ أنه يعطّل التمرير تمامًا: إذا كنت تريد فقط إخفاء شريط التمرير مع الإبقاء على التمرير لشريط تمرير مخصص، فإن overflow-y:hidden لا يكفي؛ بل تحتاج إلى حيلة حاوية visible و scroll.
Qما الفرق بين overflow-y:auto و overflow-y:scroll؟
Aيعرض scroll دائمًا شريط تمرير رأسي حتى عندما لا يفيض المحتوى، لذا يبقى مسار شريط التمرير محجوزًا بشكل دائم. أما auto فيعرض شريط التمرير فقط عندما يفيض المحتوى ويخفيه خلاف ذلك. بصريًا، auto أنظف دون مسار متبقٍ، ولهذا يُوصى به للتخطيطات اليومية. بينما يناسب scroll الحالات التي تريد فيها الإشارة إلى أن المنطقة قابلة للتمرير، مثل لوحات الشرح التعليمي.
Qهل يمكن ضبط overflow-x و overflow-y معًا؟
Aنعم، ولكن بقاعدة واحدة: عندما يكون كلاهما visible، يفيض المحتوى بشكل طبيعي؛ وما إن يصبح أحد المحورين غير visible، يُعاد كتابة قيمة visible للمحور الآخر تلقائيًا إلى auto. على سبيل المثال، overflow-x:hidden; overflow-y:visible تصبح فعليًا overflow-y:auto. ولهذا قد ترى أشرطة تمرير auto غير متوقعة بعد ضبط محور واحد، كما يعني أنك لا تستطيع الجمع بين فيضان رأسي visible حقيقي وفائض أفقي مقصوص.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
