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** स्थापना हुन्छ, जसले फ्लोट गरिएको बच्चाहरूलाई समावेश गर्छ र margin collapsing रोक्छ — ऐतिहासिक रूपमा "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 बिना क्यारोसेल बनाउँछ; `overscroll-behavior` एक स्क्रल गरिएको प्यानेलले पनि यसको पछाडिको पृष्ठ स्क्रल गरेको रोक्छ (मोडल्स/चेट विन्डोहरूको लागि उत्तम)।

## यो किन महत्त्वपूर्ण छ

`overflow` स्क्रलिङ क्षेत्र, पाठ क्लिपिङ (`text-overflow: ellipsis` सहित), र modal/panel स्क्रल व्यवहार नियन्त्रण गर्छ।

स्क्रल कन्टेनरहरूलाई आकारको बाध्यता चाहिन्छ, `overflow` ले formatting context सिर्जना गर्छ, र आधुनिक सहायकहरू (`scroll-snap`, `overscroll-behavior`) जान्दै overflow वरिपरि व्यावहारिक layout र UX आवश्यकताहरू कभर गर्छ।