overflow property اور scroll containers کیسے کام کرتے ہیں؟

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 سے بچتے ہوئے عمودی سکرول کی اجازت دیں۔

## ایک scroll container بنانا

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

کلیدی بات: ایک scroll container کو **محدود سائز** (`height`/`max-height`) *اور* `overflow: auto` کی ضرورت ہے۔ سائز کی حد کے بغیر، یہ باکس صرف بڑھتا ہے اور کبھی سکرول نہیں ہوتا۔

## ایک لطیف لیکن اہم ضمنی اثر: overflow ایک block formatting context بناتا ہے

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

`overflow` کو `visible` کے علاوہ کچھ بھی سیٹ کرنے سے ایک نیا **block formatting context** قائم ہوتا ہے، جو floating children کو شامل کرتا ہے اور margin collapsing سے روکتا ہے — تاریخی طور پر "clearfix" کے طور پر استعمال ہوتا ہے۔

## جدید scroll خصوصیات

```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 کے بغیر carousels بناتا ہے؛ `overscroll-behavior` ایک scrolled panel کو صفحہ کے پیچھے بھی سکرول کرنے سے روکتا ہے (modals/chat windows کے لیے بہترین)۔

## یہ کیوں اہم ہے

`overflow` scroll areas، text clipping (with `text-overflow: ellipsis`)، اور modal/panel scroll behavior کو کنٹرول کرتا ہے۔

یہ جاننا کہ scroll containers کو سائز کی حد کی ضرورت ہے، کہ `overflow` ایک formatting context بناتا ہے، اور جدید helpers (`scroll-snap`، `overscroll-behavior`) overflow کے گرد عملی layout اور UX ضروریات کو پورا کرتے ہیں۔