วิธีเปลี่ยนรูปแบบ Scroll Bar ด้วย CSS

suttasilo

วิธีเปลี่ยนรูปแบบ Scroll Bar ด้วย CSS
ตัวอย่าง

วิธีทำ
ไปที่จัดการระบบ AdminCP -> ทั่วไป -> ตั้งค่า SEO -> อื่นๆ
ตรงข้อมูลส่วนหัวอื่น ๆ:
ให้นำโค้ดนี้ไปใส่ในช่องสี่เหลี่ยม

1. <style type="text/css">
   
2. ::-webkit-scrollbar {
   
3.     width: 12px;
   
4. }
   
5. 
   
6. ::-webkit-scrollbar-track {
   
7.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   
8.     -webkit-border-radius: 10px;
   
9.     border-radius: 10px;
   
10. }
    
11. 
    
12. ::-webkit-scrollbar-thumb {
    
13.     -webkit-border-radius: 10px;
    
14.     border-radius: 10px;
    
15.     background: rgba(255,255,0,0.8);
    
16.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    
17. }
    
18. 
    
19. ::-webkit-scrollbar-thumb:window-inactive {
    
20.         background: rgba(255,0,0,0.4);
    
21. }
    
22. </style>

คัดลอกไปที่คลิปบอร์ด

จากนั้นกดตกลงและลองรีเฟรซหน้าเว็บบอร์ดใหม่
สั่งเกตุตรง Scroll Bar ข้างๆจะเป็นสีเหลืองตามค่าที่ตั้งไว้

วิธีเปลี่ยนสี
ก่อนอื่นเข้าไปในเว็บและเลือกสี

1. https://www.w3schools.com/colors/colors_picker.asp

คัดลอกไปที่คลิปบอร์ด

copyโค้ดสีที่เราเลือกในวงเล็บของ rgb ไว้ไปใช้

จากนั้นไปที่โค้ดที่พึ่งใส่และค้นหา

1. background: rgba(255,255,0,0.8);

คัดลอกไปที่คลิปบอร์ด

copyโค้ดในวงเล็บของ rgbไปแทนที่
เช่นสีน้ำเงินจะเป็น

1. background: rgba(0,0,255,0.8);

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์ที่ได้

ขอบคุณที่มาจากสมาชิก WindzTrumpet กระทู้เว็บดิสคัสไทยเดิม https://discuzthai.com/thread-40478-1-1.html