滚动条样式以及常见属性

虽然工作中并不常用,但是在不常用的属性里,也有一些常用的属性

以下是常见的滚动条属性操作

<style type="text/css">  
        *{  
            scrollbar-face-color:#F3F3F3; /*面子*/  
            scrollbar-arrow-color:#C0C0C0; /*箭头*/  
            scrollbar-3dlight-color:#C0C0C0; /*最外左*/  
            scrollbar-highlight-color:#FFFFFF; /*左二*/  
            scrollbar-shadow-color:#FFFFFF; /*右二*/  
            scrollbar-darkshadow-color:#C0C0C0; /*右一*/  
            scrollbar-track-color:#F3F3F3; /*滑道*/  
        }  
        /*滚动条整体*/  
        ::-webkit-scrollbar{  
            width:14px; /*滚动条宽度*/  
        }  
        /*滚动条按钮*/  
        ::-webkit-scrollbar-button {  
  
        }  
        ::-webkit-scrollbar-track{  
            background-color:#F3F3F3;  /*滑道全部*/  
        }  
        ::-webkit-scrollbar-track-piece{  
            background-color:#F3F3F3;  /*滑道*/  
            -webkit-border-radius:4px; /*滑道圆角宽度*/  
        }  
        ::-webkit-scrollbar-thumb{  
            background-color:#F3F3F3; /*滑动条表面*/  
            border:solid 1px #C0C0C0; /*滑动条边框*/  
            border-radius:4px;  /*滑动条圆角宽度*/  
        }  
        /*横竖滚动条交角*/  
        ::-webkit-scrollbar-corner {  
            background-color: #F3F3F3;  
        }  
        /*横竖滚动条交角图案*/  
        ::-webkit-resizer {  
            /*background-image: url(/public/img/resizer-inactive.png);*/  
           background-repeat: no-repeat;  
           background-position: bottom right;  
       }  
       /*鼠标滑过滑动条*/  
        ::-webkit-scrollbar-thumb:hover{  
            background-color:#F3F3E0;  
        }  
    </style>  

通过对 "::-webkit-scrollbar"的调整,可以让控制条"隐藏",同时滚动效果仍然能存在,如下

 ::-webkit-scrollbar{  
            width:0px; /*将宽度设为0,滚动条伪消失,实际上滚动效果仍然存在*/  
        }  

关于iframe标签的scrolling属性

定义和用法

scrolling 属性规定是否在 iframe 中显示滚动条。默认地，如果内容超出了 iframe，滚动条就会出现在 iframe 中。