როგორ მუშაობს overflow თვისება და scroll კონტეინერები?

Question

Accepted Answer

`overflow` აკონტროლებს რა ხდება, როდესაც კონტენტი **ძალიან დიდია** მისი ყუთისთვის — მიუხედავად იმისა, რომ ის გაჭრილია, ხვეული, ან გამოდის.

```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`. ზომის შეზღუდვის გარეშე, ყუთი უბრალოდ იზრდება და არასოდეს ხვეულს.

## დახვეწილი, მაგრამ მნიშვნელოვანი გვერდითი ეფექტი: overflow ქმნის block formatting context-ს

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

`overflow`-ის `visible`-ის გარდა რამე სხვაზე დაყენება ადგენს ახალ **block formatting context**-ს, რომელიც შეიცავს მცურავ შვილებს და ხელს უშლის margin კოლაფსს — ისტორიულად გამოიყენებოდა როგორც "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` ზღვრავს ხვეულ პანელს იმ გვერდის ხვევისგან, რომელიც მის უკან მდებარეობს (შესანიშნავი მოდალებისა და ჩატის ფანჯრებისთვის).

## რატომ მნიშვნელოვანია

`overflow` მართავს scroll ზონებს, ტექსტის გაჭრას (სთან `text-overflow: ellipsis`), და მოდალის/პანელის scroll ქცევას.

იმის ცოდნა, რომ scroll კონტეინერებს სჭირდება ზომის შეზღუდვა, რომ `overflow` ქმნის formatting context-ს, და თანამედროვე დამხმარეები (`scroll-snap`, `overscroll-behavior`) მოიცავს overflow-ის ირგვლივ პრაქტიკული განლაგებისა და UX-ის საჭიროებებს.