overflow प्रॉपर्टी और scroll containers कैसे काम करते हैं?

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 को रोकें और ऊर्ध्वाधर स्क्रॉल की अनुमति दें।

## स्क्रॉल कंटेनर बनाना

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

मुख्य बात: एक स्क्रॉल कंटेनर को **सीमित आकार** (`height`/`max-height`) *और* `overflow: auto` की आवश्यकता है। आकार सीमा के बिना, बॉक्स बस बढ़ता रहता है और कभी स्क्रॉल नहीं होता।

## एक सूक्ष्म लेकिन महत्वपूर्ण दुष्प्रभाव: overflow एक block formatting context बनाता है

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

`overflow` को `visible` के अलावा कुछ भी सेट करने से एक नया **block formatting context** स्थापित होता है, जो फ्लोट किए गए बच्चों को शामिल करता है और मार्जिन कोलपसिंग को रोकता है — ऐतिहासिक रूप से "clearfix" के रूप में उपयोग किया जाता था।

## आधुनिक स्क्रॉल विशेषताएं

```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` एक स्क्रॉल किए गए पैनल को इसके पीछे के पृष्ठ को भी स्क्रॉल करने से रोकता है (modals/chat windows के लिए बहुत अच्छा)।

## यह महत्वपूर्ण क्यों है

`overflow` स्क्रॉलिंग क्षेत्रों, टेक्स्ट क्लिपिंग (with `text-overflow: ellipsis`) को नियंत्रित करता है, और modal/panel स्क्रॉल व्यवहार।

यह जानना कि स्क्रॉल कंटेनर को आकार की बाधा की आवश्यकता होती है, कि `overflow` एक formatting context बनाता है, और आधुनिक सहायकों (`scroll-snap`, `overscroll-behavior`) overflow के चारों ओर व्यावहारिक लेआउट और UX आवश्यकताओं को कवर करते हैं।