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 தேவைகளை உள்ளடக்குகிறது என்பதை அறிவது.