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 ను నిరోధించండి, నిలువు స్క్రోల్‌ను అనుమతించండి.

## 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` అవసరం. పరిమాణ పరిమితి లేకుండా, బాక్స్ కేవలం వృద్ధి పడుతుంది మరియు ఎప్పుడూ స్క్రోల్ చేయదు.

## ఒక సూక్ష్మమైన కానీ ముఖ్యమైన సైడ్ ఎఫెక్ట్: overflow block formatting context ను సృష్టిస్తుంది

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

`overflow` ను `visible` కంటే ఉష్ణమైన ఏదైనా సెట్ చేయడం ఒక నতুన **block formatting context** ను స్థాపిస్తుంది, ఇది తేలియాడే సందర్భాలను కలిగి ఉంటుంది మరియు మార్జిన్ కూలిపోవడాన్ని నిరోధిస్తుంది — చరిత్రకంగా "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` స్క్రోలింగ్ ప్రాంతాలను, టెక్స్ట్ క్లిప్పింగ్‌ను (`text-overflow: ellipsis` తో), మరియు మోడల్/ప్యానెల్ స్క్రోల్ ప్రవర్తనను నియంత్రిస్తుంది.

Scroll containers కు పరిమాణ నియంత్రణ అవసరం, `overflow` formatting context ను సృష్టిస్తుంది, మరియు ఆధునిక సహాయకాలు (`scroll-snap`, `overscroll-behavior`) overflow చుట్టూ ఉన్న ఆచరణాత్మక లేఅవుట్ మరియు UX అవసరాలను కవర్ చేస్తాయని తెలుసుకోవడం.