修改浏览器默认滚动条效果

• 修改某个div的滚动条默认样式
  

#search-list::-webkit-scrollbar-track<br>
{
	border-radius: 10px;<br>
	background-color: #F5F5F5;<br>
}

#search-list::-webkit-scrollbar{<br>
	width: 14px;
	background-color: #F5F5F5;
}

#search-list::-webkit-scrollbar-thumb{<br>
	border-radius: 12px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}
复制代码

• 滚动条组成
  ::-webkit-scrollbar: 滚动条总体部分
  ::-webkit-scrollbar-thumb： 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决因而垂直滚动条仍是水平滚动条）
  ::-webkit-scrollbar-track：滚动条的轨道（里面装有Thumb）
  ::-webkit-scrollbar-button：滚动条的轨道的两端按钮，容许经过点击微调小方块的位置。
  ::-webkit-scrollbar-track-piece：内层轨道，滚动条中间部分（除去）
  ::-webkit-scrollbar-corner：边角，即两个滚动条的交汇处
  ::-webkit-resizer：两个滚动条的交汇处上用于经过拖动调整元素大小的小控件
  

• 简洁版样式：

• 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸

::-webkit-scrollbar{ 
  width: 16px;  
  height: 16px;  
  background-color: #F5F5F5; 
}  
复制代码

• 定义滚动条轨道 内阴影+圆角

::-webkit-scrollbar-track {  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px; 
    background-color: #F5F5F5; 
}  
复制代码

• 定义滑块 内阴影+圆角

::-webkit-scrollbar-thumb{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555; 
}  

复制代码

• 兼容IE IE只能修改颜色

div{
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow: auto;
    /*三角箭头的颜色*/
    scrollbar-arrow-color: #ff0;
    /*滚动条滑块按钮的颜色*/
    scrollbar-face-color: #f00;
    /*滚动条总体颜色*/
    scrollbar-highlight-color: #333;
    /*滚动条阴影*/
    scrollbar-shadow-color: #ccc;
    /*滚动条轨道颜色*/
    scrollbar-track-color: #666;
}
复制代码

• 火狐浏览器未开放针对滚动条样式的设定，而且也不支持css代码关于这些浏览器属性的控制