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

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

Bramus

บทนำ

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

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

แถบเลื่อน 101

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

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

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