自定義滾動條，滾動條兼容問題和隱藏

自定義滾動條

<div class="customTooltip" style="width: 200px; max-height: 200px;  overflow-y: auto;"></div>

谷歌

滾動條組成部分

::-webkit-scrollbar 滾動條整體部分

::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或向左向右移動）

::-webkit-scrollbar-track 滾動條的軌道（裏面裝有Thumb）

::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，由於通過點擊微調小方塊的位置。

::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分

::-webkit-scrollbar-corner 邊角，即垂直滾動條和水平滾動條相交的地方

::-webkit-resizer 兩個滾動條的交匯處上用於拖動調整元素大小的小控件

.customTooltip::-webkit-scrollbar {/*滾動條整體樣式*/
  width: 10px;
  height: 1px;
}
.customTooltip::-webkit-scrollbar-thumb {/*滾動條裏面小方塊*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}
.customTooltip::-webkit-scrollbar-track {/*滾動條裏面軌道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}

其他設置項：

:horizontal 僞類適用於任何水平方向上的滾動條

:vertical 僞類適用於任何垂直方向的滾動條

:decrement 僞類適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區域向上或者向右移動的區域和按鈕

:increment 僞類適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕

:start 僞類適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的前面

:end 僞類適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的後面

:double-button 僞類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨着一對在一起的按鈕。

:single-button 僞類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨着一個單獨的按鈕。

:no-button 僞類表示軌道結束的位置沒有按鈕。

:corner-present 僞類表示滾動條的角落是否存在。

:window-inactive 適用於所有滾動條，表示包含滾動條的區域，焦點不在該窗口的時候。

::-webkit-scrollbar-track-piece:start {
// 滾動條上半邊或左半邊
}

::-webkit-scrollbar-thumb:window-inactive {
// 當焦點不在當前區域滑塊的狀態
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
// 當鼠標在水平滾動條下面的按鈕上的狀態
}

IE瀏覽器

IE專屬的滾動條樣式定義，只能設置各種原始結構的顏色，寬高結構等其他樣式無法修改

.customTooltip {

  scrollbar-arrow-color: red; /*三角箭頭的顏色*/

  scrollbar-face-color: green; /* 立體滾動條的顏色（包括箭頭部分的背景色） */

  scrollbar-3dlight-color: blue; /* 立體滾動條亮邊的顏色 */

  scrollbar-highlight-color: #ddd; /* 滾動條的高亮顏色（左陰影？） */

  scrollbar-shadow-color: pink;/* 立體滾動條陰影的顏色 */

  scrollbar-darkshadow-color: #ccc;/* 立體滾動條外陰影的顏色 */

  scrollbar-track-color: orange; /* 立體滾動條背景顏色 */

  scrollbar-base-color: yellow;/* 滾動條的基色 */
}

火狐

火狐不允許自定義滾動條樣式

提供幾篇瀏覽器兼容參考：

原生js實現

使用插件

滾動條隱藏並實現滾動

如果只是想實現滾動，可以將滾動條隱藏掉，而不影響滾動功能

// 谷歌
.customTooltip::-webkit-scrollbar {
    width: 0px;
}
//兼容IE、火狐
.customTooltip {
    scrollbar-width: none;
    -ms-overflow-style: none;
}