คุณสมบัติ 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` หยุดแพนเนลที่เลื่อนแล้วจากการเลื่อนหน้าเว็บด้านหลังด้วย (ยอดเยี่ยมสำหรับ modals/หน้าต่างแชท)

## ทำไมจึงมีความสำคัญ

`overflow` ควบคุมพื้นที่เลื่อน การตัดข้อความ (พร้อม `text-overflow: ellipsis`) และลักษณะการทำงานการเลื่อน modal/panel

การรู้ว่า scroll containers ต้องมีข้อจำกัดของขนาด `overflow` สร้าง formatting context และตัวช่วยสมัยใหม่ (`scroll-snap`, `overscroll-behavior`) ครอบคลุมความต้องการของเลย์เอาต์และ UX ในทางปฏิบัติที่เกี่ยวข้องกับ overflow

แกนที่แยกจากกัน

การสร้าง scroll container

ผลข้างเคียงที่ละเอียดแต่สำคัญ: overflow สร้าง block formatting context

คุณลักษณะ scroll สมัยใหม่

ทำไมจึงมีความสำคัญ

question.related