h5 滚动条

1. @-moz-document url-prefix(http://),
   
2. url-prefix(https://),
   
3. url("chrome://browser/content/bookmarks/bookmarksPanel.xul"),
   
4. url("chrome://browser/content/browser.xul"),
   
5. url("chrome://browser/content/history/history-panel.xul") {
   
6. 
   
7. 
   
8. /* 垂直滚动条 */
   
9. scrollbar *
   
10. scrollbar scrollbarbutton { display: none ! important; }
    
11. scrollbar scrollbarbutton { visibility: collapse !important }
    
12. 
    
13. scrollbar[orient="vertical"]
    
14. {
    
15. -moz-appearance: none !important;
    
16. background-color: transparent !important; background-image: none !important; /* 滚动条背景透明 */
    
17. min-width: 4px !important;
    
18. max-width: 4px !important;
    
19. -moz-margin-start: -4px !important; /* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
    
20. position: relative !important; /* 更改滚动条的定位方式为相对 */
    
21. z-index: 2147483647 !important; /* 把滚动条提到Z轴最上层 */
    
22. }
    
23. 
    
24. /* 可以改变垂直滚动条的宽度，默认17px（必须同时改变，最小宽度和最大宽度完全相同） */
    
25. /* 默认的垂直滚动条的宽度是17px */
    
26. scrollbar[orient="vertical"]:hover
    
27. {
    
28. -moz-appearance: none !important;
    
29. background-color: transparent !important; background-image: none !important;
    
30. min-width: 4px !important;
    
31. max-width: 4px !important;
    
32. -moz-margin-start: -4px !important;
    
33. position: relative !important;
    
34. z-index: 2147483647 !important;
    
35. }
    
36. 
    
37. /* 滚动条按钮 */
    
38. scrollbar thumb[orient="vertical"]
    
39. {
    
40. -moz-appearance: none !important;
    
41. background-color: rgba(0,100,255,.5) !important;
    
42. border-radius: 0px !important;
    
43. min-width: 4px !important;
    
44. max-width: 4px !important;
    
45. border: 1px !important; /* 滚动条按钮边框 */
    
46. border-color: rgba(0,100,255,.75) !important;  /* 滚动条按钮边框颜色和透明度 */
    
47. border-style: none none none solid !important; /* 垂直滚动条按钮的左边框样式 */
    
48. }
    
49. 
    
50. /* 鼠标悬停样式: 滚动条按钮 */
    
51. scrollbar thumb[orient="vertical"]:hover
    
52. {
    
53. background-color: rgba(0,100,255,.75) !important;
    
54. border-radius: 0px !important;
    
55. border: 0px !important;
    
56. }
    
57. 
    
58. /* 点击拖动样式：滚动条按钮 */ 
    
59. scrollbar thumb[orient="vertical"]:active
    
60. {
    
61. background-color: rgba(0,100,255,.75) !important;
    
62. border-radius: 0px !important;
    
63. border: 0px !important;
    
64. }
    
65. 
    
66. /* 水平滚动条 */
    
67. scrollbar[orient="horizontal"]
    
68. {
    
69. -moz-appearance: none !important;
    
70. background-color: transparent !important; background-image: none !important;
    
71. min-height: 4px !important;
    
72. max-height: 4px !important;
    
73. margin-top: -4px !important; /* 把滚动条位置移到屏幕外，这里的像素应该等于水平滚动条高度的负值 */
    
74. position: relative !important; 
    
75. z-index: 2147483647 !important;
    
76. }
    
77. 
    
78. /* 可以改变水平滚动条的高度，默认17px（必须同时改变，最小高度和最大高度完全相同） */
    
79. /* 默认高度是17px */
    
80. scrollbar[orient="horizontal"]:hover
    
81. {
    
82. -moz-appearance: none !important;
    
83. background-color: transparent !important; background-image: none !important;
    
84. min-height: 4px !important;
    
85. max-height: 4px !important;
    
86. margin-top: -4px !important;
    
87. position: relative !important;
    
88. z-index: 2147483647 !important;
    
89. }
    
90. 
    
91. /* 滚动条按钮 */
    
92. scrollbar thumb[orient="horizontal"]
    
93. {
    
94. -moz-appearance: none !important;
    
95. background-color: rgba(0,100,255,.5) !important;
    
96. border-radius: 0px !important;
    
97. min-height: 4px !important;
    
98. max-height: 4px !important;
    
99. border: 1px !important; /* 滚动条按钮边框 */
    
100. border-color: rgba(0,100,255,.75) !important;  /* 滚动条按钮边框颜色和透明度 */
     
101. border-style: solid none none none !important; /* 水平滚动条按钮的上边框样式 */
     
102. margin-left: 0px !important;
     
103. }
     
104. 
     
105. /* 鼠标悬停样式: 滚动条按钮 */
     
106. scrollbar thumb[orient="horizontal"]:hover
     
107. {
     
108. background-color: rgba(0,100,255,.75) !important;
     
109. border-radius: 0px !important;
     
110. border: 0px !important;
     
111. }
     
112. 
     
113. /* 点击拖动样式：滚动条按钮 */ 
     
114. scrollbar thumb[orient="horizontal"]:active
     
115. {
     
116. background-color: rgba(0,100,255,.75) !important;
     
117. border-radius: 0px !important;
     
118. border: 0px !important;
     
119. }
     
120. 
     
121. /* 去除垂直与水平滚动条相交汇的角落 */
     
122. scrollcorner{opacity: 0 !important;}
     
123. scrollbar scrollcorner:hover {background:transparent !important;}
     
124. 
     
125. }