วิธีการ - แถบเลื่อนแบบกำหนดเอง
เรียนรู้วิธีสร้างแถบเลื่อนแบบกำหนดเองด้วย CSS
แถบเลื่อนแบบกำหนดเอง
หมายเหตุ:ไม่รองรับแถบเลื่อนแบบกำหนดเองใน Firefox หรือใน Edge เวอร์ชันก่อนหน้า 79
วิธีสร้างแถบเลื่อนแบบกำหนดเอง
Chrome, Edge, Safari และ Opera รองรับ::-webkit-scrollbar
องค์ประกอบหลอกที่ไม่ได้มาตรฐาน ซึ่งช่วยให้เราปรับเปลี่ยนรูปลักษณ์ของแถบเลื่อนของเบราว์เซอร์ได้
ตัวอย่างต่อไปนี้สร้างแถบเลื่อนแบบบาง (กว้าง 10px) ซึ่งมีแทร็ก/แถบสีเทาและแฮนเดิลสีเทาเข้ม (#888)
ตัวอย่าง
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
ตัวอย่างนี้สร้างแถบเลื่อนที่มีเงากล่อง:
ตัวอย่าง
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
ตัวเลือกแถบเลื่อน
สำหรับเบราว์เซอร์ webkit คุณสามารถใช้องค์ประกอบเทียมต่อไปนี้เพื่อปรับแต่งแถบเลื่อนของเบราว์เซอร์ได้:
::-webkit-scrollbar
แถบเลื่อน::-webkit-scrollbar-button
ปุ่มบนแถบเลื่อน (ลูกศรชี้ขึ้นและลง)::-webkit-scrollbar-thumb
ที่จับเลื่อนที่ลากได้::-webkit-scrollbar-track
แทร็ก (แถบความคืบหน้า) ของแถบเลื่อน::-webkit-scrollbar-track-piece
แทร็ก (แถบความคืบหน้า) ไม่ครอบคลุมโดยที่จับ::-webkit-scrollbar-corner
ที่มุมด้านล่างของแถบเลื่อน ซึ่งทั้งแถบเลื่อนแนวนอนและแนวตั้งมาบรรจบกัน::-webkit-resizer
แฮนเดิลปรับขนาดที่ลากได้ซึ่งปรากฏอยู่ที่มุมด้านล่างขององค์ประกอบบางอย่าง