使用CSS來修飾滾動條

2021-03-31 13:05:48 字數 1112 閱讀 8183

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.讓瀏覽器視窗永遠都不出現滾動條

沒有水平滾動條

沒有垂直滾動條

沒有滾動條

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

沒有水平滾動條

沒有垂直滾動條

沒有滾動條 或

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

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

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

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

.coolscrollbar

scrollbar-arrow-color:yellow;

scrollbar-base-color:lightsalmon;

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

使用CSS實現無滾動條滾動

我們都知道,擼頁面的時候當我們的內容超出了我們的div,往往會出現滾動條,影響美觀。接下來小萌介紹幾種簡單的方法,但是也不是完美的解決問題了,各求所需吧 在webkit核心的瀏覽器裡可以定義滾動條樣式。在css初始處定義 1 webkit scrollbar 不過目前本方法只在webkit核心瀏覽器...

css滾動條屬性

overflow 屬性 檢索或 設定當物件的內容超 過其指定高度及寬度 時如何顯示內容 overflow auto 在需要時 內容會自動新增 滾動條overflow scroll 總是 顯示滾動條overflow x hidden 禁止橫向的 滾動條overflow y scroll 總是 顯示縱向...

css控制滾動條

1 overflow內容溢位時的設定 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2 scrollbar 3d light color立體滾動條亮邊的顏色 scroll...