overflow property आणि scroll containers कसे काम करतात?

Question

Accepted Answer

`overflow` नियंत्रित करते की जेव्हा content त्याच्या box साठी **खूप मोठे** असते तेव्हा काय होते — ते clip होते, 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 container तयार करणे

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

मुख्य गोष्ट: scroll container ला **सीमित आकार** (`height`/`max-height`) *अधिक* `overflow: auto` आवश्यक आहे. आकाराची मर्यादा न असल्यास, box फक्त वाढते आणि कधीही scroll होत नाही.

## एक सूक्ष्म परंतु महत्वाचा दुष्प्रभाव: overflow एक block formatting context तयार करते

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

`overflow` ला `visible` व्यतिरिक्त काहीही सेट केल्याने नवीन **block formatting context** स्थापित होता, जो floating children ला समाविष्ट करते आणि margin collapsing रोखते — ऐतिहासिकदृष्ट्या "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 शिवाय carousels तयार करते; `overscroll-behavior` scroll केलेल्या panel ला त्याच्या मागे पृष्ठ scroll होणे रोखते (modals/chat windows साठी उत्तम).

## हे महत्वाचे का आहे

`overflow` scroll areas, text clipping (`text-overflow: ellipsis` सह), आणि modal/panel scroll वर्तन शासित करते.

स्क्रॉल containers ला आकार constraint आवश्यक आहे, की `overflow` एक formatting context तयार करते, आणि आधुनिक मदतकर्मी (`scroll-snap`, `overscroll-behavior`) overflow च्या आसपास व्यावहारिक layout आणि UX गरजा कव्हर करते हे जाणून घेणे महत्वाचे आहे.