默認滾動條樣式修改及插件

PC瀏覽器默認的滾動條樣式一般都很醜，特別是ie；移動端滾動條樣式一般都很優美，但是移動端常常隱藏滾動條，這時需要對默認的滾動條樣式做一定的修改，對滾動條要求比較高會複雜時（如要求鼠標懸浮在列表上時才顯示滾動條，移開滾動條消失），常常需要用到滾動條插件。

滾動條默認樣式修改：

<!-- elment 被選元素 -->
<!-- 
	重寫滾動條樣式
	::-webkit-scrollbar 滾動條整體部分
	::-webkit-scrollbar-thumb  滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）
	::-webkit-scrollbar-track  滾動條的軌道（裏面裝有Thumb）
	::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
	::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
	::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
	::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件
-->
elmen {
  overflow: hidden;
  overflow-y: auto;
}
elment::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0, 0);
}
elment::-webkit-scrollbar {
  width: 6px;
  height: 13px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
elment::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 28px;
}
elment::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

移動端顯示出隱藏的滾動條：實際測試不是所有的手機都有效，部分手機纔會顯示出來

.overtime-card-btns::-webkit-scrollbar {
  width: 6px;
  height: 3px;
}
.overtime-card-btns::-webkit-scrollbar-thumb {
  background-color: rgba(89,76,59,1);
  background-clip: padding-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

//且overflow-x設置爲scroll而不是hidden

插件：因爲移動端樣式很友好，因此插件基本用於PC端

1、jquery.nicescroll.min.js

Nicescroll jQuery Plugin：https://nicescroll.areaaperta.com/功能很強大，對滾動條做了很多包裝

2、jquery.slimscroll.min.js

這個插件小巧，很適用，但是隻能修飾縱向滾動條，橫向滾動條不起作用