CSS自定義滾動條（IE和chrome）

許多瀏覽器對滾動條的樣式是不一樣的，比ie下和chrome下就好區別很多，而且它們的**實現也是不一樣的 

下面就實現一下ie下和chrome下的滾動條樣式

主要有下面7個屬性:

1.::-webkit-scrollbar 滾動條整體部分，可以設定寬度啥的 

2.::-webkit-scrollbar-button 滾動條兩端的按鈕 

3.::-webkit-scrollbar-track 外層軌道 

4.::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去） 

5.::-webkit-scrollbar-thumb 拖動條，滑塊 

6.::-webkit-scrollbar-corner 邊角 

7.::-webkit-resizer 定義右下角拖動塊的樣式

chrome下對三角形設定沒有ie完好的

實踐**

::-webkit-scrollbar 

::-webkit-scrollbar-thumb 
::-webkit-scrollbar-button 

ie比較少，都以顏色為主 

1.scrollbar-arrow-color: color; /三角箭頭的顏色/ 

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

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

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

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

6.scrollbar-darkshadow-color: color; /立體滾動條外陰影的顏色/ 

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

8.scrollbar-base-color:color; /滾動條的基色/

對應位置

實踐**

如果想在某個div中使用滾動條，只需要給div個id就好， 

webkit形式就如： #scroll::-webkit-scrollbar 

ie形式就如： #scroll

三、overflow隱藏滾動條

1.去掉橫向滾動條：< body style=』overflow:scroll;overflow-x:hidden』> 

2.去掉豎向滾動條：< body style=』overflow:scroll;overflow-y:hidden』> 

3.兩個都去掉：< body scroll=」no」> 

4.框架中去滾動條在name=」「後面加 scrolling=」no」

css自定義滾動條

1 在谷歌瀏覽器和safari中可直接設定，如果想單獨對某個盒子新增，直接在偽類前面加上選擇器即可 滾動條的軌道 滾動條的滑塊按鈕 webkit scrollbar track,webkit scrollbar thumb 滾動條的上下兩端的按鈕 webkit scrollbar button we...

CSS自定義滾動條

乙個類名為parent的容器包裹了一些lorem。lorem ipsum dolor sit amet consectetur adipisicing elit.iusto,delectus libero cupiditate sapiente excepturi,ea hic,exercitati...

CSS 自定義滾動條

瀏覽器允許自定義滾動條，ie也可以改變預設的樣色，不過效果不明顯。常見谷歌瀏覽器滾動條修改 webkit scrollbar webkit scrollbar thumb webkit scrollbar track ie自定義滾動條顏色 webkit scrollbar 滾動條整體部分，可以設定寬...