ใช้คุณสมบัติ scrollbar-width
และ scrollbar-color
เพื่อจัดรูปแบบแถบเลื่อน
เกริ่นนำ
คุณสามารถจัดสไตล์แถบเลื่อนตั้งแต่ Chrome เวอร์ชัน 2 ที่มีองค์ประกอบเทียม ::-webkit-scrollbar-*
วิธีการนี้ใช้ได้ดีใน Chrome และ Safari แต่คณะทำงานของ CSS ไม่เคยกำหนดให้วิธีนี้เป็นมาตรฐาน
สิ่งที่ได้รับการปรับให้เป็นมาตรฐานคือพร็อพเพอร์ตี้ scrollbar-width
และ scrollbar-color
ซึ่งเป็นส่วนหนึ่งของข้อกำหนดโมดูลการจัดรูปแบบแถบเลื่อนของ CSS ระดับ 1 พร็อพเพอร์ตี้เหล่านี้รองรับตั้งแต่ Chrome 121
แถบเลื่อน 101
กายวิภาคของแถบเลื่อน
อย่างน้อยที่สุดแถบเลื่อนจะมีแทร็กและนิ้วโป้ง แทร็กคือบริเวณที่นิ้วโป้งเคลื่อนที่ได้ แทร็กจะแสดงระยะทางทั้งหมดในการเลื่อน นิ้วโป้งจะแสดงตำแหน่งปัจจุบันภายในบริเวณที่เลื่อนได้ เมื่อคุณเลื่อน วัตถุจะเคลื่อนที่ภายในแทร็ก นิ้วโป้งมักลากนิ้วโป้งได้ด้วย
แต่แถบเลื่อนอาจมีมากกว่าแค่นิ้วโป้งและรอยติดตามได้ ตัวอย่างเช่น แถบเลื่อนอาจมีปุ่มอย่างน้อย 1 ปุ่มเพื่อเพิ่มหรือลดระยะออฟเซ็ตการเลื่อน ส่วนต่างๆ ที่ประกอบขึ้นเป็นแถบเลื่อนจะกำหนดโดยระบบปฏิบัติการที่ใช้งานอยู่
แถบเลื่อนแบบคลาสสิกและการวางซ้อน
ก่อนที่จะดูวิธีจัดรูปแบบแถบเลื่อน คุณต้องเข้าใจความแตกต่างระหว่างแถบเลื่อน 2 ประเภท
วางซ้อนแถบเลื่อน
แถบเลื่อนของการวางซ้อนคือแถบเลื่อนแบบลอยที่แสดงที่ด้านบนของเนื้อหาที่อยู่ด้านล่าง โดยจะไม่แสดงโดยค่าเริ่มต้น แต่จะแสดงให้เห็นเฉพาะขณะที่คุณเลื่อนดูเท่านั้น หากต้องการให้ทุกคนมองเห็นเนื้อหาด้านล่างได้ ตัวเลือกดังกล่าวมักจะเป็นแบบเปิดเผยบางส่วน แต่ก็ขึ้นอยู่กับระบบปฏิบัติการที่ตัดสินใจ ในระหว่างที่โต้ตอบกับผู้ใช้ ขนาดของช่องอาจแตกต่างกันไป
แถบเลื่อนแบบคลาสสิก
แถบเลื่อนแบบคลาสสิกคือแถบเลื่อนที่วางไว้ในรางเลื่อนของแถบเลื่อนโดยเฉพาะ รางเลื่อนของแถบเลื่อนคือช่องว่างระหว่างขอบเส้นขอบด้านในและขอบระยะห่างจากขอบด้านนอก แถบเลื่อนเหล่านี้มักมีสีทึบ (ไม่โปร่งใส) และกินพื้นที่บางส่วนจากเนื้อหาที่อยู่ติดกัน
พร็อพเพอร์ตี้ scrollbar-color
และ scrollbar-width
ให้สีแถบเลื่อนด้วย scrollbar-color
พร็อพเพอร์ตี้ scrollbar-color
ให้คุณเปลี่ยนรูปแบบสีของแถบเลื่อนได้ พร็อพเพอร์ตี้ยอมรับค่า <color>
2 ค่า ค่า <color>
แรกจะเป็นตัวกำหนดสีของนิ้วหัวแม่มือ และค่าที่ 2 เป็นสีที่จะใช้กับแทร็ก
.scroller {
scrollbar-color: hotpink blue;
}
เมื่อใช้แถบเลื่อนแบบวางซ้อน สีของแทร็กจะไม่ส่งผลใดๆ โดยค่าเริ่มต้น อย่างไรก็ตาม เมื่อคุณวางเมาส์เหนือแถบเลื่อน แทร็กก็จะแสดงขึ้น
หากต้องการใช้การแสดงผลเริ่มต้นจากระบบปฏิบัติการ ให้ใช้ auto
เป็นค่า
การเปลี่ยนขนาดของแถบเลื่อนด้วย scrollbar-width
พร็อพเพอร์ตี้ scrollbar-width
ช่วยให้คุณเลือกแถบเลื่อนที่แคบลงได้ หรือจะซ่อนแถบเลื่อนไปเลยก็ได้โดยไม่ส่งผลต่อความสามารถในการเลื่อน
ค่าที่ยอมรับคือ auto
, thin
และ none
auto
: ความกว้างแถบเลื่อนเริ่มต้นตามที่แพลตฟอร์มระบุไว้thin
: แถบเลื่อนรูปแบบบางที่แพลตฟอร์มมีให้ หรือแถบเลื่อนแบบกำหนดเองที่บางกว่าแถบเลื่อนของแพลตฟอร์มเริ่มต้นnone
: ซ่อนแถบเลื่อนอย่างมีประสิทธิภาพ แต่องค์ประกอบจะยังคงเลื่อนได้
ใช้ <length>
เช่น 16px
เป็นค่าสำหรับ scrollbar-width
ไม่ได้
.scroller {
scrollbar-width: thin;
}
เมื่อใช้แถบเลื่อนแบบวางซ้อน ระบบจะวาดนิ้วโป้งเฉพาะเมื่อคุณเลื่อนดูบริเวณที่เลื่อนได้
การรองรับเบราว์เซอร์เวอร์ชันเก่า
หากต้องการรองรับเบราว์เซอร์เวอร์ชันที่ไม่รองรับ scrollbar-color
และ scrollbar-width
คุณสามารถใช้ทั้งพร็อพเพอร์ตี้ scrollbar-*
และ ::-webkit-scrollbar-*
ใหม่ได้
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
โปรดทราบว่าเมื่อคุณตั้งค่า width
หรือ height
เป็น ::-webkit-scrollbar
แถบเลื่อนแบบวางซ้อนจะแสดงขึ้นทุกครั้ง ซึ่งจะเปลี่ยนเป็นแถบเลื่อนแบบคลาสสิกได้อย่างมีประสิทธิภาพ
หากต้องการรักษาภาพลวงตา คุณสามารถเลือกเปลี่ยนสีเฉพาะเวลาที่วางแถบเลื่อนได้
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}