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

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

Bramus

บทนำ

ตั้งแต่ 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> แรกจะเป็นตัวกำหนดสีของนิ้วหัวแม่มือ และค่าอีกค่าหนึ่งคือสีที่จะใช้กับแทร็ก

.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. */
}