Kako deluje svojstvo overflow in scroll containers?

Question

IT Interview Practice · Accepted Answer

`overflow` nadzira, kaj se zgodi, ko je vsebina **prevelika** za njeno polje — ali je obrezana, se pomika ali se razlije ven.

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

## Ločene osi

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

Obiajni vzorec: prepreči vodoravni overflow, medtem ko dovoli navpično drsenje.

## Ustvarjanje scroll container-ja

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

Ključno: scroll container potrebuje **omejeno velikost** (`height`/`max-height`) *ter* `overflow: auto`. Brez omejenosti velikosti se polje samo razširi in se nikoli ne pomika.

## Suptilen, vendar pomemben stranski učinek: overflow ustvari blok formatting context

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

Nastavitev `overflow` na kaj drugega kot `visible` vzpostavi nov **block formatting context**, ki vsebuje plutajoče otroke in preprečuje razpad robov — zgodovinsko uporabljen kot "clearfix".

## Sodobne scroll funkcionalnosti

```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 karusele brez JS; `overscroll-behavior` ustavi drsenje plošče, da ne premika tudi strani za njo (odličko za modalne okne/chatne okne).

## Zakaj je pomembno

`overflow` ureja območja drsenja, obrezovanje besedila (z `text-overflow: ellipsis`) in obnašanje drsenja modalnih/ploščnih oken.

Znanje, da scroll containers potrebujejo omejitev velikosti, da `overflow` ustvari formatting context, in sodobne pomočnike (`scroll-snap`, `overscroll-behavior`) pokriva praktične potrebe glede postavitve in UX-a pri overflow-u.

Ločene osi

Ustvarjanje scroll container-ja

Suptilen, vendar pomemben stranski učinek: overflow ustvari blok formatting context

Sodobne scroll funkcionalnosti

Zakaj je pomembno

Povezana vprašanja