ตัวสร้าง CSS Scrollbar
สร้าง scrollbar แบบกำหนดเองด้วย scrollbar-width, scrollbar-color และ ::-webkit-scrollbar พร้อมพรีวิวสด ตัวเลือกสี และ CSS พร้อมคัดลอก - ทำงานในเบราว์เซอร์ 100%
Loading tool...
ตัวสร้าง CSS Scrollbar คืออะไร?
ตัวสร้าง CSS Scrollbar เป็นเครื่องมือแบบภาพสำหรับจัดแต่ง scrollbar ด้วย CSS แบบ native สร้าง property มาตรฐาน scrollbar-width และ scrollbar-color สำหรับ Firefox และ Chromium รุ่นปัจจุบัน พร้อมส่วน ::-webkit-scrollbar เลือกเปิดได้ คุม size, radius และ hover สำหรับ Chrome และ Safari รุ่นเก่า พรีวิวสดอัปเดตทุกครั้งที่ปรับ และคลิกเดียวก็คัดลอก CSS สะอาดพร้อมใช้งาน
ประโยชน์หลัก
- scrollbar เข้ากับแบรนด์โดยไม่ต้องใช้ JavaScript
- พรีวิวสดของทุกการผสม property
- ได้ทั้ง output มาตรฐานและ WebKit ใน snippet เดียว
- CSS พร้อมคัดลอก กำหนด scope ที่คลาส
กรณีการใช้งาน
- •ทำ scrollbar ให้เข้ากับ design system โหมดมืด
- •ทำ scrollbar เริ่มต้นที่หนาใน dashboard ให้บางลง
- •ซ่อน scrollbar ใน carousel โดยยังเลื่อนได้
- •ทดลองสไตล์ scrollbar ก่อนใช้จริง
วิธีใช้ตัวสร้าง CSS Scrollbar
- เลือกความกว้าง scrollbar: เลือก auto เพื่อหน้าตาแบบเดิม, thin เพื่อให้บางลง หรือ none เพื่อซ่อน scrollbar โดยยังเลื่อนได้ตามปกติ
- เลือกสี thumb และ track: ใช้ตัวเลือกสีหรือพิมพ์ค่า hex กำหนดสี thumb ตอน hover เพื่อให้ผู้ใช้เห็น feedback เวลาลาก scrollbar
- เปิดส่วน WebKit (เลือกได้): เปิดใช้ ::-webkit-scrollbar pseudo-elements สำหรับ Chrome และ Safari รุ่นเก่า แล้วปรับ slider ขนาดและมุมโค้งของ thumb
- พรีวิวและคัดลอก: เลื่อนดูพรีวิวสดเพื่อเช็กความรู้สึก แล้วคลิกคัดลอก CSS และวางลงใน stylesheet ของคุณ
คุณสมบัติหลัก
- แสดงผล scrollbar-width (auto/thin/none) และ scrollbar-color มาตรฐานสำหรับ Firefox และ Chrome รุ่นใหม่
- ส่วน ::-webkit-scrollbar เลือกเปิดได้ พร้อมคุม size, border-radius และสีตอน hover
- พรีวิวสดที่เลื่อนได้จริง อัปเดตทันทีที่ปรับทุกค่า
- ตัวเลือกสีพร้อมช่อง hex ที่ตรวจสอบค่าและมี fallback ที่เหมาะสม
- คัดลอก CSS สะอาดพร้อมใช้งานคลิกเดียว กำหนด scope ที่คลาส .scrollable
คำถามที่พบบ่อย
scrollbar-width ทำอะไร?
scrollbar-width กำหนดความหนาของ scrollbar: auto ใช้ค่าเริ่มต้นของระบบ, thin แสดงแบบบางลง และ none ซ่อน scrollbar ทั้งหมดแต่ยังเลื่อนได้ปกติ รองรับใน Firefox และเบราว์เซอร์ Chromium รุ่นใหม่
scrollbar-color ใช้งานอย่างไร?
scrollbar-color รับค่าสีสองค่า: ค่าแรกกำหนดสี thumb (ส่วนที่ลากได้) และค่าที่สองกำหนดสี track เช่น scrollbar-color: #6366f1 #e2e8f0 จะได้ thumb สีครามอินดิโกบน track เทาอ่อน
ยังต้องใช้ ::-webkit-scrollbar อยู่ไหม?
Chrome, Edge และ Safari รุ่นใหม่รองรับ scrollbar-width และ scrollbar-color แล้ว แต่รุ่นเก่ารู้จักเฉพาะกลุ่ม pseudo-element ::-webkit-scrollbar การใส่ทั้งสองส่วนช่วยให้คุมรายละเอียด (size, radius, hover) และครอบคลุมเบราว์เซอร์ได้กว้างที่สุด
การซ่อน scrollbar กระทบ accessibility ไหม?
การซ่อน scrollbar ด้วย scrollbar-width: none ลบสัญญาณภาพว่ามีเนื้อหาให้เลื่อน ควรใช้อย่างระวัง ควรมีตัวบ่งชี้ว่าเนื้อหาเลื่อนได้อย่างอื่น ตรวจว่าเลื่อนด้วยคีย์บอร์ดยังทำงาน และพิจารณา prefers-reduced-motion กับการตั้งค่าผู้ใช้ก่อนซ่อน scrollbar ทั้งหมด