美化浏览器滚动条/隐藏滚动条

美化滚动条：

html{
    scrollbar-color: #dddddd #f8f8f8;  /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin;  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style:none;  /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
}

/*滚动条凹槽的颜色，还可以设置边框属性*/
::-webkit-scrollbar-track-piece {
    background-color:#f8f8f8;
}
/*滚动条的宽度*/
::-webkit-scrollbar {
    width:5px;
    height:5px;
}
/*滚动条的设置*/
::-webkit-scrollbar-thumb {
    background-color:#dddddd;
    background-clip:padding-box;
    min-height:10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
}

隐藏滚动条：

/*兼容火狐*/
.inContainer {
   scrollbar-width: none;
}
/* 兼容IE10+ */
.inContainer {
    -ms-overflow-style: none;
}

/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
.inContainer::-webkit-scrollbar {
    display:none;
}

chrome

基础属性：

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   // 定义右下角拖动块的样式

详细属性

:horizontal //水平方向的滚动条
:vertical  //垂直 方向的滚动条
:decrement  //应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
:increment  //decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
:start  //伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end //类似于start伪类，标识对象是否放到滑块的后面。
:double-button //该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
:single-button //类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
:no-button //用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。:corner-present //用于所有滚动条轨道，指示滚动条圆角是否显示。
:window-inactive //用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

用法：

::-webkit-scrollbar-track-piece:start {}
::-webkit-scrollbar-thumb:window-inactive {}
::-webkit-scrollbar-button:horizontal:decrement:hover {}

IE

对于IE，目前只找到修改滚动条各种属性的颜色，未找到修改样式的地方

html{
   scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/   
   scrollbar-face-color: #333; /*立体滚动条的颜色*/   
   scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/   
   scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/   
   scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/   
   scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/   
   scrollbar-track-color: #666; /*立体滚动条背景颜色*/   
   scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ 
}