การจัดรูปแบบแถบเลื่อน

ใช้พร็อพเพอร์ตี้ scrollbar-width และ scrollbar-color เพื่อจัดรูปแบบแถบเลื่อน

Bramus

บทนำ

ตั้งแต่ Chrome เวอร์ชัน 2 เป็นต้นมา คุณสามารถจัดรูปแบบแถบเลื่อนด้วย::-webkit-scrollbar-*องค์ประกอบเสมือนได้ แนวทางนี้ใช้ได้ดีใน Chrome และ Safari แต่ไม่เคยได้รับการกำหนดมาตรฐานโดยกลุ่มงาน CSS

สิ่งที่ได้รับการกำหนดมาตรฐานคือพร็อพเพอร์ตี้ scrollbar-width และ scrollbar-color ซึ่งเป็นส่วนหนึ่งของข้อกำหนดของโมดูลการจัดรูปแบบแถบเลื่อน CSS ระดับ 1 พร็อพเพอร์ตี้เหล่านี้รองรับตั้งแต่ Chrome 121 เป็นต้นไป

Browser Support

Source

แถบเลื่อน 101

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

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

แถบเลื่อนอาจมีส่วนประกอบมากกว่าแค่แถบเลื่อนและแทร็ก ตัวอย่างเช่น แถบเลื่อนอาจมีปุ่มอย่างน้อย 1 ปุ่มเพื่อเพิ่มหรือลดออฟเซ็ตการเลื่อน ระบบปฏิบัติการพื้นฐานจะเป็นตัวกำหนดส่วนประกอบของแถบเลื่อน

ภาพส่วนประกอบของแถบเลื่อน ภาพทางด้านซ้ายคือแถบเลื่อนขั้นต่ำที่มีเพียงแทร็กและหัวเลื่อน ส่วนอันทางขวาก็มีปุ่มด้วย

แถบเลื่อนแบบคลาสสิกและแบบซ้อนทับ

ก่อนที่จะดูวิธีจัดรูปแบบแถบเลื่อน คุณควรทำความเข้าใจความแตกต่างระหว่างแถบเลื่อน 2 ประเภท

แถบเลื่อนแบบซ้อนทับ

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

ภาพประกอบของเบราว์เซอร์ที่มีแถบเลื่อนแบบวางซ้อน — ภาพเบราว์เซอร์ที่มีแถบเลื่อนแบบวางซ้อน แถบเลื่อนจะซ้อนทับเนื้อหา ส่วนหัวของแถบเลื่อนจะโปร่งใสบางส่วน

แถบเลื่อนแบบคลาสสิก

แถบเลื่อนแบบคลาสสิกคือแถบเลื่อนที่วางไว้ในรางแถบเลื่อนโดยเฉพาะ รางเลื่อนคือพื้นที่ระหว่างขอบเส้นขอบด้านในกับขอบระยะเว้นด้านนอก โดยปกติแล้ว แถบเลื่อนเหล่านี้จะทึบแสง (ไม่โปร่งใส) และใช้พื้นที่บางส่วนจากเนื้อหาที่อยู่ติดกัน

พร็อพเพอร์ตี้ `scrollbar-color` และ `scrollbar-width`

การใส่สีแถบเลื่อนด้วย `scrollbar-color`

scrollbar-color พร็อพเพอร์ตี้ช่วยให้คุณเปลี่ยนรูปแบบสีของแถบเลื่อนได้ พร็อพเพอร์ตี้ยอมรับค่า <color> 2 ค่า ค่า <color> ค่าแรกจะกำหนดสีของนิ้วโป้ง ส่วนค่าที่ 2 จะกำหนดสีที่จะใช้สำหรับแทร็ก

.scroller {
  scrollbar-color: hotpink blue;
}

เมื่อใช้แถบเลื่อนแบบซ้อนทับ สีของแทร็กจะไม่มีผลโดยค่าเริ่มต้น อย่างไรก็ตาม เมื่อวางเมาส์เหนือแถบเลื่อน แทร็กจะแสดงขึ้น

การสาธิต: การจัดรูปแบบแถบเลื่อน: scrollbar-color

หากต้องการใช้การแสดงผลเริ่มต้นที่ระบบปฏิบัติการมีให้ ให้ใช้ auto เป็นค่า

การเปลี่ยนขนาดแถบเลื่อนด้วย `scrollbar-width`

พร็อพเพอร์ตี้ scrollbar-width ช่วยให้คุณเลือกแถบเลื่อนที่แคบลง หรือแม้แต่ซ่อนแถบเลื่อนทั้งหมดโดยไม่ส่งผลต่อความสามารถในการเลื่อน

ค่าที่ยอมรับคือ auto, thin และ none

auto: ความกว้างของแถบเลื่อนเริ่มต้นตามที่แพลตฟอร์มระบุ
thin: แถบเลื่อนแบบบางที่แพลตฟอร์มมีให้ หรือแถบเลื่อนที่กำหนดเองซึ่งบางกว่าแถบเลื่อนเริ่มต้นของแพลตฟอร์ม
none: ซ่อนแถบเลื่อนอย่างมีประสิทธิภาพ แต่ยังคงเลื่อนองค์ประกอบได้

คุณจะใช้ <length> เช่น 16px เป็นค่าสำหรับ scrollbar-width ไม่ได้

.scroller {
  scrollbar-width: thin;
}

เมื่อใช้แถบเลื่อนแบบวางซ้อน ระบบจะวาดแถบเลื่อนเฉพาะในขณะที่คุณเลื่อนพื้นที่ที่เลื่อนได้อยู่

การสาธิต: การจัดรูปแบบแถบเลื่อน: scrollbar-width

การรองรับเบราว์เซอร์เวอร์ชันเก่า

หากต้องการรองรับเบราว์เซอร์เวอร์ชันที่ไม่รองรับ 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);
    }
}

การสาธิต: การจัดรูปแบบแถบเลื่อนโดยใช้ scrollbar-* พร้อมการสำรองข้อมูลเป็น ::-webkit-scrollbar-*

โปรดทราบว่าเมื่อตั้งค่า 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. */
}

การสาธิต: การจัดรูปแบบแถบเลื่อนโดยใช้ scrollbar-* พร้อมการสำรองข้อมูลเป็น ::-webkit-scrollbar-* โดยใช้สี ::-webkit-scrollbar-* เมื่อวางเมาส์เท่านั้น