在css 中，如果我們在塊級容器上設定了屬性:
overflow:scroll /* x y 方向都會*/
或者overflow-x:scroll /*只是x方向*/
或者overflow-y:scroll /*只是y方向*/
有時候我們需要自定義滾動條的樣式，比如一開始就它顯示，比如想改變滾動條的顏色，設定軌道的樣式等，那麼這篇文章就是為你準備的。
1.認識滾動條
設定scrollbar的為css偽元素，對應上圖的數字：
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
::-webkit-scrollbar //滾動條整體部分
::-webkit-scrollbar-button //滾動條兩端的按鈕
::-webkit-scrollbar-track // 外層軌道
::-webkit-scrollbar-track-piece //內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-thumb //滾動條裡面可以拖動的那個
::-webkit-scrollbar-corner //邊角
::-webkit-resizer ///定義右下角拖動塊的樣式
demo
進入頁面，開啟控制台工具，選中其中乙個樣式，就能看到該樣式的css原始碼。
/*定義滾動條高寬及背景
高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
/*定義滾動條軌道
內陰影+圓角*/
::-webkit-scrollbar-track
/*定義滑塊
內陰影+圓角*/
::-webkit-scrollbar-thumb
: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
chrome能很好的支援自定義滾動條，其它的瀏覽器在不同程度上支援自定義滾動條樣式。
參考文章：
span設CSS樣式總是不起作用的解決方法
複製 如下 此處 display block 一定要加上，否則，span不起作用 如果要定程式設計客棧義span居中，必須www.cppcns.com先讓span成塊級元素顯示，也就是說，要先定義span的display block 屬性，然後再給span新增邊距屬性margin 0px auto ...
android layout weight設定解讀
參考文章 android layout weight的真實含義是 一旦view設定了該屬性 假設有效的情況下 那麼該 view的寬度等於原有寬度 android layout width 加上其在剩餘空間中的佔比！設螢幕寬度為l，在兩個view的寬度都為match parent的情況下，原有寬度為l...
Android RecyclerView設定空布局
1 自定義乙個emptyrecyclerview繼承recyclerview 2 採用adapterdataobserver觀察者模式來監聽資料的變化，如果有資料就隱藏空布局，反之，則顯示。view memptyview private adapterdataobserver emptyobserv...