ซ่อน Scrollbar แต่ยังเลื่อนได้ (Scrollable without Scrollbar)
ใช้ overflow: hidden บน body หรือ container จะซ่อน scrollbar และ **ปิดการเลื่อน** ทั้งหมด หากต้องการ **เลื่อนได้แต่ไม่เห็น scrollbar** ใช้เทคนิคอื่น
โค้ดตัวอย่าง (ซ่อนและปิดการเลื่อน)
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 150vh; width: 200vw; overflow: hidden;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
p { font-size: 40px; font-weight: 500; }
</style>
</head>
<body>
<h1>ตัวอย่างซ่อน Scrollbar</h1>
<p>Lorem ipsum...</p>
</body>
</html>วิธีซ่อน Scrollbar แต่เลื่อนได้ (Modern)
/* Chrome, Safari, Edge, Opera */
.container::-webkit-scrollbar { display: none; }
/* Firefox */
.container { scrollbar-width: none; }
/* IE/Edge Legacy */
.container { -ms-overflow-style: none; }ใช้งานจริง
.scrollable-content {
overflow-y: auto; /* หรือ scroll */
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox */
}
.scrollable-content::-webkit-scrollbar { display: none; } /* WebKit */กรณีใช้งาน
- Horizontal scroll carousel/slider
- Custom scrollbar ด้วย JavaScript library
- Full-screen sections (scroll snap)
- Modal/Dialog ที่ scroll เอง
Accessibility: ผู้ใช้บางคนต้องการ scrollbar เป็นสัญญาณว่ามีเนื้อหาเพิ่ม – ควรมี visual indicator อื่น (fade edge, arrow, dot navigation) แทน
