浏览器自带滚动条样式修改

浏览器中设置所有元素的统一滚动条样式：（直接在css中找地方贴入即可）

::-webkit-scrollbar {  /* 滚动条整体部分 */
  width:10px;
  margin-right:2px
}
::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
  width:10px;
  background-color: yellow;
}
::-webkit-scrollbar:horizontal {
  height:10px;
  margin-bottom:2px
}
::-webkit-scrollbar-track {  /* 外层轨道 */
  border-radius: 10px;
}
::-webkit-scrollbar-track-piece {  /*内层轨道，滚动条中间部分 */
  background-color: #333333;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {  /* 滑块 */
  width:10px;
  border-radius: 5px;
  background: #CBCBCB;
}
::-webkit-scrollbar-corner { /* 边角 */
  width: 10px;
  background-color: red;
}
::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
  background: #909090;
}

Less实现设置滚动条样式的函数（支持非IE）

.scroll-bar() {
  &::-webkit-scrollbar {  /* 滚动条整体部分 */
    width:10px;
    margin-right:2px
  }
  &::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
    width:10px;
    background-color: yellow;
  }
  &::-webkit-scrollbar:horizontal {
    height:10px;
    margin-bottom:2px
  }
  &::-webkit-scrollbar-track {  /* 外层轨道 */
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track-piece {  /*内层轨道，滚动条中间部分 */
    background-color: #333333;
    border-radius: 10px;
  }
  &::-webkit-scrollbar-thumb {  /* 滑块 */
    width:10px;
    border-radius: 5px;
    background: #CBCBCB;
  }
  &::-webkit-scrollbar-corner { /* 边角 */
    width: 10px;
    background-color: red;
  }
  &::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
    background: #909090;
  }
}

使用：.demo{  .scroll-bar(); }

可以编译为css：将&替换为.demo即可