webkit滾動條樣式重置
1、scrollbar包含scrollbar buttons和一個track。track進一步細分為track pieces和thumb。trace pieces為thumb的上半部分和半下部分。
2、scrollbar corner為橫向和豎向的交叉角區域
3、resize用來設置滾動條的交匯處上用於拖動調整元素大小的小控件
組成結構圖如下：
一旦發現滾動條的自定義樣式，瀏覽器的默認樣式設置將會失效，只使用在css定義的樣式。也就意味值不能單獨只設置scrollbar button或scrollbar track。
-webkit-scrollbar /* 滾動條整體部分，重置時必須要設置 */ -webkit-scrollbar-button /* 滾動條的軌道的兩端按鈕 */ -webkit-scrollbar-track /* 滾動條的軌道（包含thumb和trace-piece）*/ -webkit-scrollbar-track-piece /* 軌道中下方塊的上下(左右)部分*/ -webkit-scrollbar-thumb /*滾動條里面的小方塊*/ -webkit-scrollbar-corner /* 垂直和水平的交叉角 */ -webkit-resize // 滾動條的交匯處上用於拖動調整元素大小的小控件 */可以結合以下偽類進行設置（不同的操作系統瀏覽器滾動條可能不一樣，所有可以根據下面偽類來設置）：
- :horizontal 水平方向的track、track-piect、thumb
- :vertica 垂直方向的track、track-piect、thumb
- :decrement 向上和向左按鈕的button、向上或向左的track-piece
- :increment 向下和向右按鈕的button、向下和向右的track-piece
- :start 適用於buttons和track pieces,對象（buttons 或 trace piece）是否放在滑塊的前面
- :end 適用於buttons和track pieces,對象（buttons 或 trace piece）是否放在滑塊的后面
- :double-button 適用於buttons和track pieces，軌道結束的位置是否是一對按鈕
- :single-button 適用於buttons和track pieces，軌道結束的位置是否是一個按鈕
- :no-button 適用於track pieces，軌道結束的位置沒有按鈕
- :corner-present 適用於所有scrollbar,滾動條的角落是否存在
- :window-inactive 適用於所有scrollbar,包含滾動條的區域，焦點不在該窗口的時候
- :enabled, :disabled, :hover , :active 這些偽類同樣適用
電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
IE滾動條樣式重置
IE中只能修改滾動條顏色
scrollbar-arrow-color:#f2f2f3; /*上下箭頭*/ scrollbar-track-color /*底層背景色*/ scrollbar-face-color /*滾動條前景色，對應thumb*/ scrollbar-shadow-color /*滾動條邊線色,thubm的border*/ scrollbar-highlight-color /*滾動條整體顏色*/ scrollbar-base-color /* 滾動條基准顏色 */