เครื่องสร้างแถบเลื่อน CSS

คุณสมบัติมาตรฐานสมัยใหม่ (2023 เป็นต้นไป)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

การรองรับของเบราว์เซอร์ (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+ จองพื้นที่ของแถบเลื่อนไว้แม้ในตอนที่ไม่จำเป็น จึงช่วยป้องกันการขยับของเลย์เอาต์

พสูโดอิลิเมนต์ของ webkit (Chrome, Safari, Edge รุ่นเก่า)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

ควบคุมได้ละเอียดยิ่งขึ้น width กำหนดความกว้างของแถบเลื่อนแนวตั้ง ส่วน height กำหนดความสูงของแถบเลื่อนแนวนอน ให้ใส่ทั้งสองค่าสำหรับคอนเทนเนอร์ที่เลื่อนได้ทั้งสองทิศทาง

จัดลำดับการซ้อนทั้งสองแนวทาง

ระบุกฎแบบสมัยใหม่ก่อน แล้วจึงใช้ webkit เป็นส่วนเสริมสำหรับเบราว์เซอร์ที่แสดงผลได้ทั้งสองแบบ:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox จะยึดตามกฎ scrollbar-* แบบสมัยใหม่เท่านั้น ส่วน Chrome และ Safari จะยึดตามกฎของ webkit (ซึ่งเขียนทับกฎแบบสมัยใหม่ พฤติกรรมจึงสอดคล้องกัน)

scrollbar-gutter ป้องกันการขยับของเนื้อหา

หากไม่มีการจองช่องไว้ เนื้อหาจะจัดเรียงใหม่เมื่อแถบเลื่อนปรากฏขึ้น (พบได้บ่อยในรายการแบบไดนามิก) วิธีแก้:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

ช่องของแถบเลื่อนจะถูกจองไว้ไม่ว่าเนื้อหาจะเลื่อนหรือไม่ก็ตาม both-edges จะเพิ่มช่องที่เท่ากันไว้อีกฝั่งหนึ่ง เพื่อให้เนื้อหาอยู่กึ่งกลางในเชิงสายตา

ซ่อนแถบเลื่อนทั้งหมด

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

โปรดระวัง: การซ่อนแถบเลื่อนทำให้ผู้ใช้ไม่เห็นว่าเนื้อหาสามารถเลื่อนได้ ควรใช้เฉพาะเมื่อมีตัวบ่งชี้ที่ชัดเจน (ลูกศร จุดบอกหน้า) หรือเมื่อพฤติกรรมการเลื่อนชัดเจนจากบริบท (คารูเซลแนวนอน ประวัติการแชท)

ข้อควรพิจารณาสำหรับมือถือ

บน iOS และ Android แถบเลื่อนจะปรากฏเพียงชั่วครู่ระหว่างที่เลื่อน CSS แถบเลื่อนแบบกำหนดเองของคุณยังคงมีผล แต่ผู้ใช้อาจไม่เห็นมันนานเกินหนึ่งวินาที จงออกแบบให้เหมาะสม อย่าลงทุนมากเกินไปกับลูกเล่นทางสายตาที่แทบไม่ปรากฏ

การเข้าถึง

• ความต่างของสี: ตัวเลื่อนเทียบกับรางควรได้อัตราส่วน 3:1 สำหรับความต่างของสีที่ไม่ใช่ข้อความ (WCAG 1.4.11)
• ความกว้าง: แถบเลื่อนที่บางอาจจับด้วยเมาส์ได้ยาก โดยเฉพาะสำหรับผู้ใช้ที่มีข้อจำกัดด้านการเคลื่อนไหว ความกว้างปกติจึงเป็นค่าเริ่มต้นที่ปลอดภัยกว่า
• อย่าเอาแถบเลื่อนออก จากพื้นที่ที่เลื่อนได้โดยเด็ดขาด หากไม่มีวิธีเลื่อนแบบอื่นให้ ผู้ใช้ที่พึ่งพาแถบเลื่อนจะติดขัด