可以設置左邊菜單項div的overflow
x:auto;overlfow
y:auto;這樣就會自動生成了滾動條
但是大家都知道自帶的不好看
接下來就是重點了
如何修改滾動條的樣式呢？感興趣的朋友可以了解下本文
最近做項目中有一個模塊是用於實時監控的左邊有個菜單欄用於顯示所有的設備那當然是從數據庫中動態獲取的了右邊是個iframe用於顯示監控畫面 本來這個功能並不復雜左邊的菜單項是利用dtreejs來實現的可時當功能實現完成之後卻發現一個問題就是左邊菜單欄中的設備名有的會很長會 超出了div的長度准確說是左邊iframe的寬度和長度不夠那麼這時就必須要利用滾動條了可以設置左邊菜單項div的overflow x:auto;overlfowy:auto;這樣就會自動生成了滾動條但是大家都知道自帶的不好看接下來就是重點了如何修改滾動條的樣式呢？
經過從網上的不斷搜索發現有兩種方法
第一種方法利用CSS提供的樣式一共是種屬性吧在這裡不做詳細介紹網上很多這方面的資料
第二種方法自己寫一個新的滾動條即不用div自帶的滾動條這樣想要什麼樣的效果就有什麼樣的效果具體實現在網上搜了很多可以發現基本上只有豎向滾動條而沒有橫向滾動條無奈之下自己利用jquery寫另一個滾動條當然也借鑒了只有豎向滾動條的程序
說 一下具體實現思路目標div 即需要生成滾動條的div裡面嵌套了個div分別是用於顯示內容的div_content顯示豎向滾動條的div_H顯示橫向滾動條的 div_W具體布局就是按照自帶滾動條的div的布局一樣然後顯示滾動條的div即div_H和div_W有各自包含了個div即左右箭頭個 滾動條個具體代碼如下
復制代碼 代碼如下:
if($(_self)
children("
jscroll
c")
height()==null){
//添加內容框(div)
$(_self)
wrapInner("<div class=
jscroll
c
style=
top:
px;z
index:
;zoom:
;position:relative;
></div>");
//添加豎向滾動條
$(_self)
append("<div class=
jscroll
e
unselectable=
on
style=
height:
%;top:
px;right:
;
moz
user
select:none;position:absolute;overflow:hidden;z
index:
;
><div class=
jscroll
u
style=
position:absolute;top:
px;width:
%;right:
;background:blue;overflow:hidden
></div><div class=
jscroll
h
unselectable=
on
style=
background:green;position:absolute;left:
;
moz
user
select:none;border:
px solid
></div><div class=
jscroll
d
style=
position:absolute;bottom:
px;width:
%;left:
;background:blue;overflow:hidden
></div></div>");
//添加橫向滾動條
$(_self)
append("<div class=
jscroll
s
unselectable=
on
style=
width:
px;bottom:
px;left:
;
moz
user
select:none;position:absolute;overflow:hidden;z
index:
;
><div class=
jscroll
l
style=
position:absolute;bottom:
px;height:
%;left:
;background:blue;overflow:hidden
></div><div class=
jscroll
g
unselectable=
on
style=
height:
%;background:green;position:absolute;left:
;
moz
user
select:none;border:
px solid
></div><div class=
jscroll
r
style=
position:absolute;bottom:
px;height:
%;right:
;background:blue;overflow:hidden
></div></div>");
}
然後無非就是一些判斷div的內容是否超過了div的范圍監聽事件的添加具體代碼可見我的下載資源
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20373.html
