利用div+jquery自訂捲軸樣式的2種方法

最近做項目中有一個模組是用於即時監控的，左邊有個功能表列用於顯示所有的裝置，那當然是從資料庫中動態擷取的了，右邊是個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 class='jscroll-c' style='top:0px;z-index:9999;zoom:1;position:relative;'></div>");
//添加豎向捲軸
$(_self).append("<div class='jscroll-e' unselectable='on' style='height:97.5%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-u' style='position:absolute;top:0px;width:100%;right:0;background:blue;overflow:hidden'></div><div class='jscroll-h' unselectable='on' style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-d' style='position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden'></div></div>");
//添加橫向捲軸
$(_self).append("<div class='jscroll-s' unselectable='on' style='width:180px;bottom:0px;left:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-l' style='position:absolute;bottom:0px;height:100%;left:0;background:blue;overflow:hidden'></div><div class='jscroll-g' unselectable='on' style='height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-r' style='position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden'></div></div>");
}

然後無非就是一些判斷，div的內容是否超過了div的範圍，監聽事件的添加。具體代碼可見我的下載資源；