overflow: hidden scroll auto clip
ควบคุมการจัดการเนื้อหาที่ล้นด้วยค่า hidden, scroll, auto และ clip
overflow: hidden scroll auto clip เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทบทวนคุณสมบัติ overflow
overflow ควบคุมสิ่งที่จะเกิดขึ้นเมื่อเนื้อหาขององค์ประกอบมีขนาดเกินมิติที่กำหนด คุณสมบัตินี้ใช้กับทั้งสองแกนพร้อมกัน หรือใช้ overflow-x/overflow-y เพื่อควบคุมแยกแต่ละแกน
overflow: visible
visible (ค่าเริ่มต้น) — เนื้อหาจะแสดงอยู่นอกกล่อง ค่านี้ไม่สร้างบริบทการจัดรูปแบบบล็อก (BFC) องค์ประกอบอื่นอาจซ้อนทับเนื้อหาที่ล้นออกมาได้
overflow: hidden
hidden ตัดเนื้อหาที่ขอบกล่อง ค่านี้สร้าง BFC ซึ่งทำให้การลอยอยู่ภายในขอบเขตและป้องกันการยุบรวมระยะขอบ เป็นค่าที่ใช้บ่อยที่สุดสำหรับคอนเทนเนอร์รูปภาพที่มีมุมโค้ง
<div class="rounded-card"></div>overflow: scroll
scroll แสดงแถบเลื่อนเสมอในแกนที่รองรับแถบเลื่อน โดยไม่คำนึงว่าเนื้อหาจะล้นหรือไม่ เหมาะสำหรับส่วนติดต่อผู้ใช้ที่ต้องการให้พื้นที่สำหรับแถบเลื่อนมีอยู่เสมอ เพื่อป้องกันการเปลี่ยนตำแหน่งของเค้าโครง
<div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>overflow: auto
auto จะแสดงแถบเลื่อนเมื่อเนื้อหาล้นจริงเท่านั้น โดยทั่วไปควรใช้ค่านี้แทน scroll สำหรับคอนเทนเนอร์ที่เลื่อนได้ เพราะหลีกเลี่ยงการแสดงแถบเลื่อนโดยไม่จำเป็น
<div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>overflow: clip
clip ตัดเนื้อหาเหมือน hidden แต่จะไม่สร้าง BFC ซึ่งหมายความว่าจะไม่ส่งผลต่อการควบคุมการลอยหรือการยุบรวมระยะขอบ ใช้ค่านี้เมื่อต้องการตัดเนื้อหาโดยไม่ให้เกิดผลข้างเคียงจาก BFC
<div class="decorative-overflow"><div class="deco"></div></div>overflow-x และ overflow-y
ควบคุมแต่ละแกนแยกจากกัน รูปแบบที่พบบ่อยมากคือ ให้เนื้อหาแนวนอนที่กว้าง เช่น ตารางและโค้ด เลื่อนได้ ขณะที่การล้นในแนวตั้งยังคงแสดงอยู่:
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>overflow และ BFC
การตั้งค่า overflow เป็นค่าใดก็ตามที่ไม่ใช่ visible และ clip จะสร้างบริบทการจัดรูปแบบบล็อก ซึ่งจะควบคุมการลอยภายใน ป้องกันไม่ให้การยุบรวมระยะขอบรั่วออกมา และสร้างบริบทการเลื่อนใหม่
overflow: overlay (ไม่เป็นมาตรฐาน)
overflow: overlay วาดแถบเลื่อนทับบนเนื้อหาแทนการจองพื้นที่ในเค้าโครง ค่านี้เป็นค่าที่ไม่เป็นมาตรฐานในเบราว์เซอร์บางรุ่น และกำลังถูกเลิกใช้เพื่อสนับสนุนการปรับแต่งแถบเลื่อนแบบสมัยใหม่
scrollbar-gutter
คุณสมบัติใหม่ scrollbar-gutter: stable จะจองพื้นที่สำหรับแถบเลื่อนแม้ยังไม่จำเป็นต้องใช้ จึงป้องกันการเปลี่ยนตำแหน่งของเค้าโครงเมื่อเนื้อหาเริ่มเลื่อนได้
<div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>overflow กับองค์ประกอบลูกแบบคงที่
ข้อผิดพลาดที่พบบ่อยคือ ลูกที่มี position: fixed อยู่ภายในองค์ประกอบที่มี overflow: hidden จะทำงานเหมือน position: absolute — ตำแหน่งคงที่จะอ้างอิงกับบล็อกที่ครอบอยู่ และ overflow จะสร้างบริบทการซ้อนใหม่
ตรวจสอบอย่างรวดเร็ว
ค่า overflow ใดตัดเนื้อหาโดยไม่สร้างบริบทการจัดรูปแบบบล็อก
สรุปทบทวน
visible (ค่าเริ่มต้น) อนุญาตให้เนื้อหาล้นออกมา hidden ตัดเนื้อหาและสร้าง BFC scroll แสดงแถบเลื่อนเสมอ auto แสดงแถบเลื่อนเมื่อจำเป็นเท่านั้น (เป็นค่าที่แนะนำ) clip ตัดเนื้อหาโดยไม่สร้าง BFC ใช้ overflow-x/y เพื่อควบคุมแยกแต่ละแกน ใช้ scrollbar-gutter: stable เพื่อป้องกันการเปลี่ยนตำแหน่งของเค้าโครง
คำถามที่พบบ่อย
บทเรียน “overflow: hidden scroll auto clip” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “overflow: hidden scroll auto clip” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “overflow: hidden scroll auto clip”
ควบคุมการจัดการเนื้อหาที่ล้นด้วยค่า hidden, scroll, auto และ clip คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “overflow: hidden scroll auto clip” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type และ scroll-snap-align
- การจัดรูปแบบแถบเลื่อนด้วย ::-webkit-scrollbar