Si funksionon pronësia overflow dhe scroll containers?

Question

Accepted Answer

`overflow` kontrollon se çfarë ndodh kur përmbajtja është **shumë e madhe** për kutinë e saj — nëse përqipet, lëviz ose rrjedh jashtë.

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

## Akse të ndara

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

Një model i zakonshëm: parandalim tejkalimin horizontal ndërsa lejon lëvizjen vertikale.

## Krijimi i një scroll container

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

Nyja: një scroll container ka nevojë për një **madhësi të kufizuar** (`height`/`max-height`) *plus* `overflow: auto`. Pa një limit madhësie, kutia vetëm zmadhohet dhe nuk lëviz kurrë.

## Një efekt anësor i hollë por i rëndësishëm: overflow krijon një block formatting context

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

Dhe vendosjen `overflow` për çdo gjë tjetër përveç `visible` vendos një **block formatting context** të ri, i cili përmban fëmijët e notuar dhe parandalon shembjen e margjinave — historikisht përdorur si një "clearfix".

## Karakteristikat moderne të 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` ndërton karuselë pa JS; `overscroll-behavior` ndalon një panel të lëvizur që të mos lëvizë edhe faqen pas tij (e shkëlqyer për modalë/dritaret e chat-it).

## Pse është i rëndësishëm

`overflow` rregullon zonat e lëvizjes, prerjen e tekstit (me `text-overflow: ellipsis`) dhe sjelljen e lëvizjes modale/panel-e.

Dija se scroll containers kanë nevojë për një kufizim madhësie, se `overflow` krijon një formatting context, dhe ndihmuesit modernë (`scroll-snap`, `overscroll-behavior`) mbulojnë nevojat praktike të planit dhe UX rreth overflow-it.