基本是通過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...