css 滚动条样式设置

Chrome浏览器滚动条样式

 1   ::-webkit-scrollbar {
 2     /*横竖滚动条的尺寸*/
 3     width: 10px;
 4   }
 5   ::-webkit-scrollbar-thumb {
 6     border: 1px solid rgba(0, 0, 0, 0);
 7     background-clip: padding-box;
 8     border-radius: 8px;
 9     background-color: rgba(0, 0, 0, 0.15);
10   }
11   ::-webkit-scrollbar-button {
12     width: 0;
13     height: 0;
14     display: none;
15   }
16   ::-webkit-scrollbar-corner {
17     background-color: transparent;
18   }

设置滚动条最小高度：

1   ::-webkit-scrollbar-thumb {
2     min-height: 100px;
3   }

IE浏览器滚动条样式

 1 .definedScrollBar {
 2   /*三角箭头的颜色*/
 3   scrollbar-arrow-color: #c0c4cc;
 4   /*滚动条滑块按钮的颜色*/
 5   scrollbar-face-color: #a2a2a3;
 6   /*滚动条整体颜色*/
 7   scrollbar-highlight-color: #a2a2a3;
 8   /*滚动条阴影*/
 9   scrollbar-shadow-color: #a2a2a3;
10   /*滚动条轨道颜色*/
11   scrollbar-track-color: #f4f4f5;
12   /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
13   scrollbar-3dlight-color: #a2a2a3;
14   /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
15   scrollbar-darkshadow-color: #a2a2a3;
16   /*滚动条基准颜色*/
17   scrollbar-base-color: #f4f4f5;
18 }

 

posted @ 2020-07-28 16:10  唐宋元明清2188  阅读(159)  评论(0)    收藏  举报