วิธีการสร้าง: สกโรลบาร์ที่สร้างขึ้นโดยตัวเอง

เรียนรู้วิธีการใช้ CSS สร้างสกโรลบาร์ที่สร้างขึ้นโดยตัวเอง

แนวทางการสร้างสกโรลบาร์ที่สร้างขึ้นโดยตัวเอง

Chrome, Edge, Safari และ Opera สนับสนุน non-standard ::-webkit-scrollbar โฟลต์ซึ่งอนุญาตให้เราปรับรูปแบบสกโรลบาร์ของเว็บเบราเซอร์

ตัวอย่างที่ต่อไปนี้สร้างสกโรลบาร์ที่มีความกว้าง 10px ที่มีสายทาง/สีสลิ้นดำและสลิ้นเข้มสีเข้มที่เป็น#888

/* ความกว้าง */
::-webkit-scrollbar {
  width: 10px;
}
/* สายทาง */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* slider */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* slider ขณะเกณฑ์หมุน */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

ลองด้วยตัวเอง

ตัวอย่างนี้สร้างสกโรลบาร์ที่มีปรากฎการณ์เงา

ตัวอย่าง

/* ความกว้าง */
::-webkit-scrollbar {
  width: 20px;
}
/* สายทาง */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* slider */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

ลองด้วยตัวเอง

เลือกสกโรลบาร์

สำหรับเว็บเบราเซอร์webkit คุณสามารถใช้อีเลเมนต์โฟลต์ซึ่งระบุดังนี้เพื่อปรับรูปแบบสกโรลบาร์ของเว็บเบราเซอร์