最近做項目中有一個模塊是用于實時監控的，左邊有個菜單欄用于顯示所有的設備，那當然是從數據庫中動態獲取的了，右邊是個iframe用于顯示監控畫面。本來這個功能并不復雜，左邊的菜單項是利用dtree.js來實現的，可時當功能實現完成之后，卻發現一個問題，就是左邊菜單欄中的設備名有的會很長，會超出了div的長度，準確說是左邊iframe的寬度和長度不夠。那么，這時就必須要利用滾動條了，可以設置左邊菜單項div的overflow-x:auto;overlfow-y:auto;這樣就會自動生成了滾動條，但是大家都知道自帶的不好看。接下來就是重點了，如何修改滾動條的樣式呢？

經過從網上的不斷搜索，發現有兩種方法：

第一種方法：利用CSS提供的樣式，一共是8種屬性吧，在這里不做詳細介紹，網上很多這方面的資料。

第二種方法：自己寫一個新的滾動條，即不用div自帶的滾動條。這樣想要什么樣的效果就有什么樣的效果。具體實現，在網上搜了很多，可以發現基本上只有豎向滾動條，而沒有橫向滾動條，無奈之下，自己利用jquery寫另一個滾動條，當然也借鑒了只有豎向滾動條的程序。

說一下具體實現思路：目標div 即需要生成滾動條的div，里面嵌套了3個div，分別是用于顯示內容的div_content，顯示豎向滾動條的div_H,顯示橫向滾動條的div_W,具體布局就是按照自帶滾動條的div的布局一樣，然后顯示滾動條的div即div_H和div_W有各自包含了3個div，即左右箭頭2個，滾動條1個。具體代碼如下：

復制代碼 代碼如下:

if($(_self).children(".jscroll-c").height()==null){
//添加內容框(div)
$(_self).wrapInner("<div></div>");
//添加豎向滾動條
$(_self).append("<div unselectable='on'><div></div><div unselectable='on'></div><div></div></div>");
//添加橫向滾動條
$(_self).append("<div unselectable='on'><div></div><div unselectable='on'></div><div></div></div>");
}