CSS 設定滾動條樣式

2021-07-30 06:07:30 字數 1495 閱讀 4669

從dhtml出現以來,微軟對dhtml功能的加強就沒有停止過,在微軟最新的遊覽器internet  

explorer  

5.5的的ie5.5增加了許多新的樣式表內容,對滾動條的樣式進行修改也是其中之一,下面我們簡單地介紹一下涉及瀏覽器滾動條的樣式表內容:  

1.overflow內容溢位時的設定  

overflow-x水平方向內容溢位時的設定  

overflow-y垂直方向內容溢位時的設定  

以上三個屬性設定的值為visible(預設值)、scroll、hidden、auto。  

2.scrollbar-3d-light-color立體滾動條亮邊的顏色  

scrollbar-arrow-color上下按鈕上三角箭頭的顏色  

scrollbar-base-color滾動條的基本顏色  

scrollbar-dark-shadow-color立體滾動條強陰影的顏色  

scrollbar-face-color立體滾動條凸出部分的顏色  

scrollbar-highlight-color滾動條空白部分的顏色  

scrollbar-shadow-color立體滾動條陰影的顏色  

以上七個屬性設定的值都是顏色值,可以使用樣式表定義的各種表達方式。  

使用以上的樣式定義內容,我們可以指定瀏覽器視窗、多行文字框的滾動條的顯示與否和顏色樣式,第一組樣式屬性用於設定被設定物件是否顯示滾動條,第二組樣式屬性則用於設定滾動條的顏色,要注意的本文涉及的樣式屬性都是ie才能支援的,第二組的樣式屬性只有ie5.5版本才能支援,所以請大家在除錯的時候注意。  

我們通過幾個例項來講解上述的樣式屬性:  

1.讓瀏覽器視窗永遠都不出現滾動條  

沒有水平滾動條  

style="overflow-x:hidden">  

沒有垂直滾動條  

style="overflow-y:hidden">  

沒有滾動條  

style="overflow-x:hidden;overflow-y:hidden">或

style="overflow:hidden">  

2.設定多行文字框的滾動條  

沒有水平滾動條  

沒有垂直滾動條  

沒有滾動條   或

3.設定視窗滾動條的顏色  

設定視窗滾動條的顏色為紅色

style="scrollbar-base-color:red">  

scrollbar-base-color設定的是基本色,一般情況下只需要設定這乙個屬性就可以達到改變滾動條顏色的目的。  

style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">  

4.設定其他元素時,基本上一樣,你最好是在樣式表檔案中定義好乙個類,這樣你就可以重複使用了。  

.coolscrollbar  

將以上語句加入到樣式表檔案中或html頭部的當中,然後使用  

CSS 設定滾動條樣式

定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸 webkit scrollbar 定義滾動條軌道 內陰影 圓角 webkit scrollbar track 定義滑塊 內陰影 圓角 webkit scrollbar thumb 定義滾動條就是利用偽元素與偽類,那什麼是偽元素和偽類呢?偽類大家應該...

CSS滾動條樣式設定

css滾動條樣式設定 webkit瀏覽器css設定滾動條 主要有下面7個屬性 webkit scrollbar 滾動條整體部分,可以設定寬度啥的 webkit scrollbar button 滾動條兩端的按鈕 webkit scrollbar track 外層軌道 webkit scrollbar...

設定滾動條樣式

html scrollbar 3d light color立體滾動條亮邊的顏色 scrollbar arrow color上下按鈕上三角箭頭的顏色 scrollbar base color滾動條的基本顏色 scrollbar dark shadow color立體滾動條強陰影的顏色 scrollba...