เพื่อซ่อน Scrollbar ด้วย CSS เราจะทำความเข้าใจแนวทางต่างๆ Scrollbar เป็น Core Component ของ Web Browser ที่ให้ผู้ใช้นำทางพื้นที่เนื้อหาที่ใหญ่กว่าหน้าต่าง Viewable เราสามารถซ่อน Scrollbar ขณะที่ยังคงฟังก์ชัน Scrolling ได้ด้วย Property overflow
Syntax
selector { overflow-x: value; overflow-y: value; }
/* หรือ Shorthand */
selector { overflow: value; }
ค่าที่เป็นไปได้
| ค่า | คำอธิบาย |
|---|---|
visible | เนื้อหาไม่ถูก Clip อาจ Render นอก Element |
hidden | เนื้อหาถูก Clip และ Scrollbar ถูกซ่อน |
scroll | เนื้อหาถูก Clip แต่ Scrollbar แสดงตลอด |
auto | Scrollbar แสดงเฉพาะเมื่อเนื้อหา Overflow |
วิธีที่ 1: ซ่อน Vertical Scrollbar
เพื่อซ่อน Vertical Scrollbar ขณะคง Horizontal Scrolling ไว้ ตั้ง overflow-y: hidden และ overflow-x: scroll
<!DOCTYPE html> <html> <head> <style> .container { height: 150px; width: 300px; overflow-y: hidden; overflow-x: scroll; border: 2px solid #333; padding: 10px; } .content { white-space: nowrap; width: 500px; background-color: #f0f8ff; } </style> </head> <body> <div class="container"> <div class="content"> This is a very long line of text that will extend beyond the container width and require horizontal scrolling to view completely. </div> <p>More content here that would normally cause vertical scrolling.</p> <p>But the vertical scrollbar is hidden.</p> </div> </body> </html>
Container มีขอบ พร้อม Horizontal Scrollbar ที่ด้านล่าง แตไม่มี Vertical Scrollbar เนื้อหาขยายแนวนอน และ Scroll ซ้าย/ขวาได้
วิธีที่ 2: ซ่อน Horizontal Scrollbar
เพื่อซ่อน Horizontal Scrollbar ขณะคง Vertical Scrolling ไว้ ตั้ง overflow-x: hidden และ overflow-y: scroll
<!DOCTYPE html> <html> <head> <style> .container { height: 150px; width: 300px; overflow-x: hidden; overflow-y: scroll; border: 2px solid #333; padding: 10px; } .content { background-color: #fff3cd; line-height: 1.5; } </style> </head> <body> <div class="container"> <div class="content"> <p>This is paragraph one with normal text content.</p> <p>This is paragraph two with more content.</p> <p>This is paragraph three adding even more text.</p> <p>This is paragraph four to create overflow.</p> <p>This is paragraph five for vertical scrolling.</p> </div> </div> </body> </html>
Container มีขอบ พร้อม Vertical Scrollbar ด้านขวา แตไม่มี Horizontal Scrollbar เนื้อหาขยายแนวตั้ง และ Scroll บน/ล่างได้
วิธีที่ 3: ซ่อน Scrollbar ทั้งคู่
เพื่อซ่อน Horizontal และ Vertical Scrollbar ทั้งคู่ ตั้ง overflow-x และ overflow-y เป็น hidden
<!DOCTYPE html> <html> <head> <style> .container { height: 150px; width: 300px; overflow: hidden; border: 2px solid #333; padding: 10px; } .content { background-color: #d1ecf1; width: 500px; line-height: 1.5; } </style> </head> <body> <div class="container"> <div class="content"> <p>This content extends both horizontally and vertically beyond the container boundaries.</p> <p>However, no scrollbars are visible, so the overflowing content is simply clipped.</p> <p>Users cannot scroll to see the hidden content.</p> </div> </div> </body> </html>
Container มีขอบ ไม่มี Scrollbar มองเห็น เนื้อหาที่เกินขอบ Container ถูก Clip และซ่อนจากมุมมอง
สรุป
การซ่อน Scrollbar ด้วย CSS overflow Properties สร้าง Interface ที่สะอาดกว่า ใช้ overflow: hidden เพื่อซ่อน Scrollbar ทั้งหมด หรือควบคุม Horizontal และ Vertical Scrolling แยกกันด้วย overflow-x และ overflow-y Properties
