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 ਬਲਾਕ formatting context ਬਣਾਉਂਦਾ ਹੈ

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

`overflow` ਨੂੰ `visible` ਤੋਂ ਇਲਾਵਾ ਕਿਸੇ ਹੋਰ ਜਾਂ ਪਰ ਸੈੱਟ ਕਰਨ ਨਾਲ ਇੱਕ ਨਵਾ **block formatting context** ਸਥਾਪਿਤ ਹੁੰਦਾ ਹੈ, ਜੋ ਫਲੋਟਿੰਗ ਬੱਚਿਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਅਤੇ 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` ਇੱਕ scrolled panel ਨੂੰ ਇਸ ਦੇ ਪਿੱਛੇ ਵਾਲੇ ਪੰਨੇ ਨੂੰ ਵੀ scroll ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ (modals/chat ਵਿੰਡੋ ਲਈ ਸ਼ਾਨਦਾਰ)।

## ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ

`overflow` scrolling ਖੇਤਰਾਂ, ਪਾਠ clipping (`text-overflow: ellipsis` ਦੇ ਨਾਲ), ਅਤੇ modal/panel scroll ਵਿਵਹਾਰ ਨੂੰ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦਾ ਹੈ।

ਇਹ ਜਾਣਨਾ ਕਿ scroll containers ਨੂੰ ਆਕਾਰ ਦੀ ਪਾਬੰਦੀ ਦੀ ਜਰੂਰਤ ਹੁੰਦੀ ਹੈ, `overflow` ਇੱਕ formatting context ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਆਧੁਨਿਕ ਸਹਾਇਕ (`scroll-snap`, `overscroll-behavior`) overflow ਦੁਆਲੇ ਵਿਹਾਰਕ layout ਅਤੇ UX ਜਰੂਰਤਾਂ ਨੂੰ ਕਵਰ ਕਰਦੇ ਹਨ।