Πώς λειτουργεί η ιδιότητα overflow και τα κοντέινερ scroll;

Question

IT Interview Practice · Accepted Answer

`overflow` ελέγχει τι συμβαίνει όταν το περιεχόμενο είναι **πολύ μεγάλο** για το κουτί του — αν κόβεται, κάνει scroll ή διαρρέει.

```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 ενώ επιτρέπεται κάθετο scroll.

## Δημιουργία κοντέινερ scroll

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

Το κλειδί: ένα κοντέινερ scroll χρειάζεται **περιορισμένο μέγεθος** (`height`/`max-height`) *συν* `overflow: auto`. Χωρίς περιορισμό μεγέθους, το κουτί απλώς μεγαλώνει και ποτέ δεν κάνει scroll.

## Μια λεπτή αλλά σημαντική παρενέργεια: το overflow δημιουργεί συμφραζόμενα μορφοποίησης μπλοκ

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

Η ρύθμιση του `overflow` σε οτιδήποτε εκτός από `visible` δημιουργεί ένα νέο **συμφραζόμενα μορφοποίησης μπλοκ**, το οποίο περιέχει αιωρούμενα παιδιά και αποτρέπει την κατάρρευση περιθωρίου — ιστορικά χρησιμοποιείται ως "clearfix".

## Σύγχρονες λειτουργίες scroll

```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` σταματά ένα κοντέινερ που κάνει scroll από το να κάνει scroll και τη σελίδα πίσω του (υπέροχο για modals/chat windows).

## Γιατί έχει σημασία

`overflow` ελέγχει περιοχές scroll, αποκοπή κειμένου (με `text-overflow: ellipsis`) και συμπεριφορά scroll modal/panel.

Γνώση ότι τα κοντέινερ scroll χρειάζονται περιορισμό μεγέθους, ότι `overflow` δημιουργεί συμφραζόμενα μορφοποίησης, και σύγχρονες βοηθοί (`scroll-snap`, `overscroll-behavior`) καλύπτουν τις πρακτικές ανάγκες διάταξης και UX γύρω από το overflow.

Ξεχωριστοί άξονες

Δημιουργία κοντέινερ scroll

Μια λεπτή αλλά σημαντική παρενέργεια: το overflow δημιουργεί συμφραζόμενα μορφοποίησης μπλοκ

Σύγχρονες λειτουργίες scroll

Γιατί έχει σημασία

Σχετικές ερωτήσεις