Scrollbar และ User Experience
ผู้ใช้คุ้นเคยกับประสบการณ์นำทางเว็บบางอย่าง เช่น โลโก้มุมซ้ายบนนำไปหน้าแรก แต่ถ้าไม่ทำงานอย่างที่คาดหวัง? ถ้า scrollbar มีอยู่แต่วางเมาส์/ลาก trackpad แล้ว ไม่เกิดอะไรขึ้น — นั่นคือ UX ที่แย่
Scrollbar บ่งบอกว่าเลื่อนดูเนื้อหาได้ ไม่เห็น scrollbar ปกติ 2 สיבה: 1) เนื้อหาพอดี viewport 2) ซ่อนไว้จนกว่าจะเริ่มเลื่อน (design แบบ modern)
ข้อควรระวัง: ใช้ horizontal scrollbar เฉพาะเมื่อตั้งใจ หากปรากฏโดยไม่ตั้งใจ แสดงว่าขนาดคอมโพเนนต์ผิด — อย่าซ่อน horizontal scrollbar เพื่อหลบปัญหา
การ реализация ด้วย CSS (Vendor Prefixes)
เบราว์เซอร์ไม่เหมือนกัน ต้องใช้ vendor prefixes:
| Prefix | เบราว์เซอร์ |
|---|---|
-webkit- | Chrome, Safari, Opera ใหม่, iOS browsers (รวม Firefox iOS) |
-moz- | Firefox (ไม่รวม iOS) |
-o- | Opera เก่า |
-ms- | Internet Explorer, MS Edge |
เครื่องมือช่วยเพิ่ม prefix อัตโนมัติ (autoprefixer) หรือเช็กเองที่ caniuse / MDN
โค้ดตัวอย่าง: ซ่อน Scrollbar
<style> * { box-sizing: border-box; scrollbar-width: none; /* Firefox */ } .container { width: 450px; border: 2px solid #666; background: lightgrey; overflow: scroll; min-height: 520px; margin: 0 auto; } .inner-container { position: absolute; left: 10; overflow-x: hidden; overflow-y: scroll; } .inner-container::-webkit-scrollbar { display: none; /* WebKit browsers */ } </style> ... <div class="container"> <div class="inner-container"> <div class="sample-text"> ...เนื้อหายาว... </div> </div> </div>
รันใน Chrome — จะเห็นพื้นหลังสีเทาและข้อความเลื่อนได้ แต่ไม่มี scrollbar แสดง 2 วิธีหลัก: Firefox ใช้ scrollbar-width: none WebKit ใช้ ::-webkit-scrollbar { display: none }
สรุป
นี่เป็นหนึ่งในหลายวิธีซ่อน scrollbar ด้วย CSS ลองทดลองปรับโค้ดหาวิธีอื่นได้
