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 અટકાવો જ્યારે ઊર્ધ્વ સ્ક્રોલ દરશાવો.

## સ્ક્રોલ કન્ટેનર બનાવવું

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

ચાવી: સ્ક્રોલ કન્ટેનરને **સીમિત કદ** (`height`/`max-height`) *વતી* `overflow: auto` ની જરૂર છે. કદમર્યાદા વિના, બક્સ વધતો જ રહે છે અને ક્યારે સ્ક્રોલ થતો નથી.

## એક સૂક્ષ્મ પરંતુ મહત્વપૂર્ણ આડ અસર: overflow એક block formatting context બનાવે છે

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

`overflow` કોઈપણ વસ્તુ સૂચવવું `visible` નહીં એક નવું **block formatting context** સ્થાપન કરે છે, જે તૈર પોતાને બાળકો અને margin collapsing અટકાવે છે — ઐતિહાસિક રીતે "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` સ્ક્રોલ પેનલને તેની પાછળ પૃષ્ઠ સ્ક્રોલ થવાથી અટકાવે છે (modals/chat windows માટે મહાન).

## તે શા માટે મહત્વપૂર્ણ છે

`overflow` શાસન scrolling zones, text clipping (with `text-overflow: ellipsis`), અને modal/panel scroll વર્તણૂક.

જાણવું કે scroll containers ને size constraint ની જરૂર છે, કે `overflow` એક formatting context બનાવે છે, અને આધુનિક સહાયકો (`scroll-snap`, `overscroll-behavior`) overflow ની આસપાસ વ્યવહારિક layout અને UX જરૂરિયાતોને આવરી લે છે.