基本是通過CSS去實現滾動條。 (1)垂直滾動條 設置是否顯示滾動條主要是在CSS中設置下列的屬性：
overflow： visible | auto | hidden | scroll overflow-x：橫向滾動條 overflow-y：縱向滾動條
參數的意義： visible : 不剪切內容也不添加滾動條。假如顯式聲明此默認值，對象將被剪切為包含對象的window或frame的大小。並且clip屬性設置將失效。 auto : 此為body對象和textarea的默認值。在需要時剪切內容並添加滾動條 hidden : 不顯示超過對象尺寸的內容 scroll : 總是顯示滾動條 overflow:auto; 這個表示當你內容超過div高度出現垂直的滾動條 所以我們想在需要的時候顯示垂直的滾動條，可以這么實現：
<div >...</div>
或者
<div >...</div>
(2)水平滾動條 如果只想出現水平的滾動條，一般還要配合禁止換行的設置，例如：
<div ></div>
(3)滾動條的外觀 在IE中，主要是使用各種顏色屬性：
scrollbar-3dlight-color:color;設置或檢索滾動條亮邊框顏色； scrollbar-highlight-color:color;設置或檢索滾動條3D界面的亮邊顏色； scrollbar-face-color:color;設置或檢索滾動條3D表面的顏色； scrollbar-arrow-color:color;設置或檢索滾動條方向箭頭的顏色；當滾動條出現但不可用時，此屬性失效； scrollbar-shadow-color:color;設置或檢索滾動條3D界面的暗邊顏色； scrollbar-darkshadow-color:color;設置或檢索滾動條暗邊框顏色； scrollbar-base-color:color;設置或檢索滾動條基准顏色。其它界面顏色將據此自動調整。 scrollbar-track-color:color;設置或檢索滾動條的拖動區域顏色
在Chrome中，基本上是使用webkit專用屬性設置：
::-webkit-scrollbar-track-piece{ background-color:#fff;/*滾動條的背景顏色*/ -webkit-border-radius:0;/*滾動條的圓角寬度*/ } ::-webkit-scrollbar{ width:8px;/*滾動條的寬度*/ height:8px;/*滾動條的高度*/ } ::-webkit-scrollbar-thumb:vertical{/*垂直滾動條的樣式*/ height:50px; background-color:#999; -webkit-border-radius:4px; outline:2px solid #fff; outline-offset:-2px; border:2px solid #fff; } ::-webkit-scrollbar-thumb:hover{/*滾動條的hover樣式*/ height:50px; background-color:#9f9f9f; -webkit-border-radius:4px; } ::-webkit-scrollbar-thumb:horizontal{/*水平滾動條的樣式*/ width:5px; background-color:#CCCCCC; -webkit-border-radius:6px; }