webkit内核浏览器自定义滚动条样式代码
webkit(开源)内核浏览器包括 chrome 、safari、iPhone/Android上默认的浏览器也是基于webkit的,因为webkit是开源的,所以国内也有基于webkit内核的浏览器,例如:360极速、遨游3、搜狗极速等。
另外还有浏览器内核还有Trident(IE内核)、Gecko(firefox内核)、Presto(Opera内核)
下面是代码:
1 html { 2 overflow: auto; 3 } 4 body { 5 position: absolute; 6 top: 0; 7 left: 0; 8 bottom: 0; 9 right: 0; 10 overflow-y: scroll; 11 overflow-x: hidden; 12 } 13 14 /*滚动条宽度*/ 15 ::-webkit-scrollbar { 16 width: 8px; 17 } 18 19 /* 轨道样式 */ 20 ::-webkit-scrollbar-track { 21 22 } 23 24 /* Handle样式 */ 25 ::-webkit-scrollbar-thumb { 26 border-radius: 10px; 27 background: rgba(0,0,0,0.2); 28 } 29 30 /*当前窗口未激活的情况下*/ 31 ::-webkit-scrollbar-thumb:window-inactive { 32 background: rgba(0,0,0,0.1); 33 } 34 35 /*hover到滚动条上*/ 36 ::-webkit-scrollbar-thumb:vertical:hover{ 37 background-color: rgba(0,0,0,0.3); 38 } 39 /*滚动条按下*/ 40 ::-webkit-scrollbar-thumb:vertical:active{ 41 background-color: rgba(0,0,0,0.7); 42 }