Jinsi ya kazi ya sifa ya overflow na scroll containers?

Question

Accepted Answer

`overflow` inakamatia nini hutokea wakati maudhui yake ni **makubwa mno** kwa sanduku lake — kama inavingirwa, kusongezeana, au kumwagika nje.

```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) */
```

## Mihimili tofauti

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

Mfumo wa kawaida: zuia overflow ya usawa huku ukiruhusu kusongezeana kwa wima.

## Kuunda scroll container

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

Kitufe: scroll container inahitaji **ukubwa uliokamatwa** (`height`/`max-height`) *pamoja na* `overflow: auto`. Bila kikomo cha ukubwa, sanduku tu linaendelea kuwa kubwa na hakikusongezeani.

## Athari ya upande unaodegevu lakini muhimu: overflow huunda block formatting context

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

Kuweka `overflow` kuwa kitu kingine isipokuwa `visible` inaanzisha **block formatting context** mpya, inayohitaji watoto waliokutana na inakataza umenyaji wa kikomo — zama zamani kutumika kama "clearfix".

## Sifa za scroll za kisasa

```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` hujenga karuseli bila JS; `overscroll-behavior` inasimamisha paneli iliyosongezeana kutokusongezeana na ukurasa nyuma yake (nzuri kwa modals/maungo ya maongezi).

## Kwa nini ni muhimu

`overflow` inakamatia maeneo ya kusongezeana, kukatwa kwa maandishi (kwa `text-overflow: ellipsis`), na tabia ya kusongezeana ya modal/paneli.

Kujua kwamba scroll containers zinahitaji kikomo cha ukubwa, kwamba `overflow` huunda formatting context, na misaada ya kisasa (`scroll-snap`, `overscroll-behavior`) inakamatia mahitaji ya vitendo ya kuweka na UX kuzunguka overflow.