كيف يعمل خاصية overflow وحاويات التمرير؟

Question

Accepted Answer

`overflow` تتحكم في ما يحدث عندما يكون المحتوى **كبيراً جداً** لصندوقه — سواء كان يتم قصه أو التمرير خلاله أو يسكب للخارج.

```css
.box { overflow: visible; }  /* default — content spills OUT of the box */
.box { overflow: hidden; }   /* clipped — overflowing content is cut off */
.box { overflow: scroll; }   /* always shows scrollbars (even if not needed) */
.box { overflow: auto; }     /* scrollbars appear ONLY when needed (best) */
```

## المحاور المنفصلة

```css
.box {
  overflow-x: hidden;  /* clip horizontal */
  overflow-y: auto;    /* scroll vertical when needed */
}
```

نمط شائع: منع overflow أفقي مع السماح بالتمرير العمودي.

## إنشاء حاوية تمرير

```css
.scroll-area {
  max-height: 400px;   /* constrain the height */
  overflow-y: auto;    /* content beyond 400px scrolls */
}
```

المفتاح: حاوية التمرير تحتاج إلى **حجم محدود** (`height`/`max-height`) *بالإضافة إلى* `overflow: auto`. بدون حد للحجم، الصندوق يكبر ببساطة ولا يتمرر أبداً.

## تأثير دقيق لكن مهم: overflow ينشئ سياق تنسيق الكتلة

```css
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
```

تعيين `overflow` لأي قيمة غير `visible` ينشئ **سياق تنسيق كتلة** جديد، الذي يحتوي على العناصر العائمة ويمنع انهيار الهوامش — تاريخياً استُخدم كـ "clearfix".

## ميزات التمرير الحديثة

```css
.gallery {
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* snap to items while scrolling */
  overscroll-behavior: contain;   /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
```

`scroll-snap` ينشئ أفران دوارة بدون JS؛ `overscroll-behavior` توقف لوحة ممررة من تمرير الصفحة خلفها أيضاً (رائع للنوافذ المنبثقة/نوافذ الدردشة).

## لماذا يهم

`overflow` تتحكم في مناطق التمرير، قطع النص (مع `text-overflow: ellipsis`)، وسلوك تمرير النافذة المنبثقة/اللوحة.

معرفة أن حاويات التمرير تحتاج إلى قيد الحجم، أن `overflow` ينشئ سياق تنسيق، والمساعدات الحديثة (`scroll-snap`, `overscroll-behavior`) تغطي احتياجات التخطيط والتجربة العملية حول overflow.