Conas a fheidhmíonn an overflow property agus scroll containers?

Question

Accepted Answer

`overflow` a rialú ar cad a tharlaíonn nuair a bhíonn an t-ábhar **ró-mhór** don bhosca — cibé acu a bhíonn sé gearrtha, ag scrolláil, nó ag scaoileadh amach.

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

## Aiseanna ar leithligh

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

Patún coitianta: cuir cosc ar overflow cothrománach agus bheith ag ceadú scrolling ingearach.

## Scroll container a chruthú

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

An eochair: bíonn **méid srianta** (`height`/`max-height`) *agus* `overflow: auto` de dhíth ar scroll container. Gan theorainn méide, fásann an bosca go simplí agus ní scrollann sé ariamh.

## Taobh-éifeacht a bheith sogheal ach tábhachtach: cruthaíonn overflow block formatting context

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

Ma shocraítear `overflow` do bhreis ar `visible` bunú block formatting context nua, a ghabhann páistí foluain agus cuir cosc ar dhreasú imeall — go stairiúil in úsáid mar "clearfix".

## Gníomhaíochtaí scrolling nua-aimseartha

```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` tógáil carousels gan JS; `overscroll-behavior` stop panel scrolled ó scriú a dhéanamh an leathanach taobh thiar air (go maith do modals/windows cainte).

## Cén fáth go bhfuil sé tábhachtach

`overflow` a riail ar scrolling limistéir, text clipping (le `text-overflow: ellipsis`), agus modal/panel scroll iompar.

A bheith ar eolas go bhfuil srianadh méide de dhíth ar scroll containers, go gcruthaíonn `overflow` block formatting context, agus cuiditheoir nua-aimseartha (`scroll-snap`, `overscroll-behavior`) a clúdú ar an gealadh fós go mothúchánach agus UX ag gealadh timpeall ar overflow.