Kako funkcioniraju svojstvo overflow i scroll kontejneri?

Question

IT Interview Practice · Accepted Answer

`overflow` kontrolira što se događa kada je sadržaj **premali** za svoju kutiju — bilo da je odrezan, skrolira se ili izlazi van.

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

## Odvojene osi

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

Česta tehnike: spriječite horizontalno prelijevanje dok dopuštate vertikalnu scroll.

## Kriranje scroll kontejnera

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

Klučno: scroll kontejner trebate **ograničenu veličinu** (`height`/`max-height`) *plus* `overflow: auto`. Bez ograničenja veličine, kutija se samo proširuje i nikada se ne skrola.

## Suptilan ali važan nuspojav: overflow stvara block formatting context

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

Postavljanje `overflow` na bilo što osim `visible` uspostavlja novi **block formatting context**, koji sadrži plutajuće podređene elemente i sprječava pad margina — historijski korišten kao "clearfix".

## Moderni scroll značajke

```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` gradi carousele bez JS-a; `overscroll-behavior` zaustavlja skrolirani panel da također skrola stranicu iza njega (odličan za modalne / chat prozore).

## Zašto je to važno

`overflow` upravlja skrolirajućim područjima, rezanjem teksta (s `text-overflow: ellipsis`) i ponašanjem skroliranja modalne / panel.

Znanje da scroll kontejneri trebaju ograničenje veličine, da `overflow` kreira formatting context i moderni pomoćnici (`scroll-snap`, `overscroll-behavior`) pokrivaju praktične potrebe za rasporedom i iskustvom oko overflowa.

Odvojene osi

Kriranje scroll kontejnera

Suptilan ali važan nuspojav: overflow stvara block formatting context

Moderni scroll značajke

Zašto je to važno

Povezana pitanja