div顯示滾動條

2021-09-02 03:11:35 字數 1330 閱讀 6462

基本是通過css去實現滾動條。

(1)垂直滾動條

設定是否顯示滾動條主要是在css中設定下列的屬性: 

overflow: visible | auto | hidden | scroll

overflow-x:橫向滾動條

overflow-y:縱向滾動條

引數的意義: 

visible : 不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將被剪下為包含物件的window或frame的大小。並且clip屬性設定將失效。

auto : 此為body物件和textarea的預設值。在需要時剪下內容並新增滾動條 

hidden : 不顯示超過物件尺寸的內容

scroll : 總是顯示滾動條 

overflow:auto; 這個表示當你內容超過div高度出現垂直的滾動條

所以我們想在需要的時候顯示垂直的滾動條,可以這麼實現:

...

或者...

(2)水平滾動條

如果只想出現水平的滾動條,一般還要配合禁止換行的設定,例如:

(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

::-webkit-scrollbar

::-webkit-scrollbar-thumb:vertical

::-webkit-scrollbar-thumb:hover

::-webkit-scrollbar-thumb:horizontal

**

讓DIV顯示滾動條

今天在公司接到一項任務,主要是做乙個導航選單,選單分橫縱結構,橫向主要顯示 中所分大類,縱向主要顯示大類中的小類,而縱向選單是用treeview來實現的,當treeview中有很多的項時,可能會使頁面走形,而公司要求是頁面大小要固定的情況下實現這些功能。這種結構在很多情況下都是通過框架來實現的,我想...

div 給div加滾動條 div的滾動條設定

今天做了個例子 div 的滾動條問題 兩種方法 一 記住寬和高一定要設定噢,否則不成的 不過在不超出時,會有下面的滾動條,所以不是最好的選擇二 記住寬和高一定要設定噢,否則不成的 這樣比較好的是,在寬和高不超出時,只是一條線 三 說明 直接為div指定overflow屬性為auto即可,但是必須指定...

DIV滾動條設定新增 CSS滾動條顯示與滾動條隱藏

div滾動條設定 css滾動條顯示與滾動條隱藏 對div設定滾動條,設定其橫向滾動條和縱向滾動條樣式。所需css樣式為overflow y和overflow x來設定div盒子物件右側和底部滾動條效果。同時也可以使用css樣式設定html框架iframe的滾動條隱藏,接下來為大家介紹。overflo...