第一部分：
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條里面的小方塊，能上下左右移動（取決於是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-track 滾動條的軌道（里面裝有thumb）
::-webkit-scrollbar-button 滾動條軌道兩端的按鈕，允許通過點擊微調小方塊的位置
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角，及兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件
任何對象都可以設置：邊框、陰影、背景圖片等等，創建的滾動條任然會按照操作系統本身的設置來完成其交互的行為。下面的偽類可以應用到上面的偽元素中。
:horizontal(horizontal偽類適用於任何水平方向上的滾動條)
:vertical(vertical偽類適用於任何垂直方向的滾動條)
:decrement(decrement偽類適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區域向上或者向右移動的區域和按鈕)
:increment(increment偽類適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕)
:start(start偽類適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的前面)
:end(end偽類適用於按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的后面)
:double-button(double-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨着一對在一起的按鈕。)
:single-button(single-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨着一個單獨的按鈕。)
:no-button(no-button偽類表示軌道結束的位置沒有按鈕。)
:corner-present(corner-present偽類表示滾動條的角落是否存在。)
:window-inactive(適用於所有滾動條，表示包含滾動條的區域，焦點不在該窗口的時候。)
::-webkit-scrollbar-track-piece:start {
/*滾動條上半邊或左半邊*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*當焦點不在當前區域滑塊的狀態*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*當鼠標在水平滾動條下面的按鈕上的狀態*/
}
參考 http://my.oschina.net/hehongbo/blog/205128
第二部分：去掉移動端滾動條解決方案
在移動端項目中往往我們會遇到寬度超出屏幕或父元素時可以左右滾動，在滾動的時候會出現左右的滾動條，這個根據設計要求有時候是不讓顯示的。
解決原理：ios無法直接讓滾動條隱藏::-webkit-scrollbar {display: none;}是沒有用的，所以我的思路就是讓滾動條離遠點超出父元素的范圍，在通過隱藏父元素的超出部分讓滾動條消失。
安卓手機：這個在安卓手機上可以直接按照我們正常的處理左右滾動的樣式就可以實現或者加上::-webkit-scrollbar {display: none;}就可以，不用特意去考慮但是流暢度不好。
IOS:直接上代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body {width: 100%;overflow: hidden;} * { margin: 0;padding: 0;} .con { position: relative; width: 100%; /*height: 200px;*/ /*為了處理safari出現的滾動條*/ overflow: hidden;/*把處理到元素外面的滾動條隱藏*/ } .aa { /*height: 205px;*/ /*為了處理safari出現的滾動條*/ position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;/*這個屬性可以使滾動更流暢有左右彈動*/ margin-top: -.3rem; padding-bottom: .3rem; -webkit-transform: translateY(0.3rem) !important; transform: translateY(0.3rem); } .bb {width: 1890px;} .bb span { display: inline-block; width: 200px; height: 200px; background: #ccc; margin-right: 10px; float: left; } </style> <body> <!-- 最少要有三層，在第三層放滾動的元素 --> <div class="con"><!-- 第一層必須要 有overflow: hidden--> <div class="aa"><!-- 第二層 處理盒子位置 進而把滾動條處理到元素下面（外面）以便隱藏滾動條--> <div class="bb"><!-- 第三層寫具體的寬度--> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>4</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> </div> </div> </div> </body> </html>
上面的代碼在ios各個瀏覽器是沒問題的，只是我在測試的時候發現在safari上還是會出現滾動條，於是我就強行加了個高度，給最外層以及滾動盒子都加了高度，滾動盒子的高度>最外層高度，那樣就可以隱藏掉了。(這樣處理的問題就在於強行給了高度，也會影響以后元素的位置)