ปรับแต่ง scroll bar ให้สวย

voidgg

ปรับแต่ง scroll bar ให้สวย

1. <font size="3" style="font-family: 'Comic Sans MS'; line-height: 1.5;"><style type="text/css" media="screen">
   
2. ::-webkit-scrollbar {width: 8px; height:3px; }
   
3. ::-webkit-scrollbar {
   
4. width: 7px;
   
5. height: 3px;
   
6. }
   
7. ::-webkit-scrollbar-track-piece {
   
8. background-color: ‪#‎FFFFFF‬;
   
9. -webkit-border-radius: 5px;
   
10. }
    
11. ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical {
    
12. width: 5px;
    
13. background-color: ‪#‎ff9d00‬;
    
14. -webkit-border-radius: 10px;
    
15. }
    
16. ::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:vertical:hover {
    
17. background-color: #ff9d00;
    
18. }
    
19. ::-moz-selection {
    
20. background: #ff9d00;color:#FFFFFF;
    
21. }
    
22. ::selection {
    
23. background: #ff9d00;color:#FFFFFF;
    
24. }</font>

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

เปลี่ยนสีโค๊ดปรับสีปรับขนาดได้ตามโค๊ด

นำโค๊ดนี้ใส่ที่ไฟล์ extend_common.css หรือ header.htm ส่วนบนของเทมเพลทที่ใช้

ทดสอบแล้วใช้ได้ในหลายเทมเพลท หลายเวอร์ชัน

ตัวอย่าง 3.2 http://rst.in.th/forum.php

voidgg

แก้ๆใส่ผิด
<style type="text/css" media="screen">
::-webkit-scrollbar {width: 8px; height:3px; }
::-webkit-scrollbar {
width: 7px;
height: 3px;
}
::-webkit-scrollbar-track-piece {
background-color: ‪#‎FFFFFF‬;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical {
width: 5px;
background-color: ‪#‎ff9d00‬;
-webkit-border-radius: 10px;
}
::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:vertical:hover {
background-color: #ff9d00;
}
::-moz-selection {
background: #ff9d00;color:#FFFFFF;
}
::selection {
background: #ff9d00;color:#FFFFFF;
}
</style>

load1part

ผมยังไม่เข้าใจเลยครับ scroll bar มันดูตรงส่วนไหนหรอครับ

mrdeep

load1part ตอบกลับเมื่อ 2014-10-11 21:42
ผมยังไม่เข้าใจเลยครับ scroll bar มันดูตรงส่วนไหนหรอครับ

แถบเลื่อน ขวาสุดไงครับ

rogers

ขอบคุณมากมายครับ