IE和谷歌的滚动条可自定义样式的属性

小咪咪 2022-12-02 00:52 14阅读 0赞

//IE专属的滚动条样式定义，只能设置各种原始结构的颜色，宽高结构等其他样式无法修改；
    
    div{ 
    
    　　 scrollbar-arrow-color: red; /*三角箭头的颜色*/
    
    　　scrollbar-face-color: green; /* 立体滚动条的颜色（包括箭头部分的背景色） */
    
    　　scrollbar-3dlight-color: blue; /* 立体滚动条亮边的颜色 */
    
    　　scrollbar-highlight-color: #ddd; /* 滚动条的高亮颜色（左阴影？） */
    
    　　scrollbar-shadow-color: pink;/* 立体滚动条阴影的颜色 */
    
    　　scrollbar-darkshadow-color: #ccc;/* 立体滚动条外阴影的颜色 */
    
    　　scrollbar-track-color: orange; /* 立体滚动条背景颜色 */
    
    　　scrollbar-base-color: yellow;/* 滚动条的基色 */
    　}
    
    //webkit内核浏览器的滚动条样式美化：
    
    #scroll-1 div { 
    　　width:400px;
    　　height:400px;
    　　}
    #scroll-1::-webkit-scrollbar {　　::-webkit-scrollbar //滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
    　　width:60px;
    　　height:10px;
    　　}
    #scroll-1::-webkit-scrollbar-button{　　::-webkit-scrollbar-button //滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果.
    　　background-color:black;
    　　}
    #scroll-1::-webkit-scrollbar-track{　　::-webkit-scrollbar-track // 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
    　　background:blue;
    　　display: none;
    　　}
    #scroll-1::-webkit-scrollbar-track-piece {　　::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分。
    　　background:green;
    　　}
    #scroll-1::-webkit-scrollbar-thumb{　　::-webkit-scrollbar-thumb //滚动条里面可以拖动的那部分,即滚动条。
    　　background:pink;
    　　border-radius:200px;
    　　}
    #scroll-1::-webkit-scrollbar-corner {　　::-webkit-scrollbar-corner //边角.
    　　background:#ddd;
    　　}
    #scroll-1::-webkit-scrollbar-resizer {　　::-webkit-resizer //定义右下角拖动块的样式.
    　　background:red;
    　　}
    
    html部分：
    
    　　<div id="scroll-1" style="width: 500px; height: 300px; border: 2px solid #1F1F1F; margin: 20px auto; overflow: auto; ">
    　　　　<div style="margin:0 auto;;height:800px;border:1px solid #ddd;width:400px;">内容部分内容部分</div>
    　　</div>
    
    //以上就是ie和webkit内核浏览器的滚动条样式修改（个中感受自己体会）。