快捷導(dǎo)航

利用div+jquery自定義滾動(dòng)條樣式的2種方法

更新時(shí)間：2013年07月18日 17:32:27 作者：

可以設(shè)置左邊菜單項(xiàng)div的overflow-x:auto;overlfow-y:auto;這樣就會(huì)自動(dòng)生成了滾動(dòng)條，但是大家都知道自帶的不好看。接下來(lái)就是重點(diǎn)了，如何修改滾動(dòng)條的樣式呢？感興趣的朋友可以了解下本文

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

經(jīng)過(guò)從網(wǎng)上的不斷搜索，發(fā)現(xiàn)有兩種方法：

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

第二種方法：自己寫(xiě)一個(gè)新的滾動(dòng)條，即不用div自帶的滾動(dòng)條。這樣想要什么樣的效果就有什么樣的效果。具體實(shí)現(xiàn)，在網(wǎng)上搜了很多，可以發(fā)現(xiàn)基本上只有豎向滾動(dòng)條，而沒(méi)有橫向滾動(dòng)條，無(wú)奈之下，自己利用jquery寫(xiě)另一個(gè)滾動(dòng)條，當(dāng)然也借鑒了只有豎向滾動(dòng)條的程序。

說(shuō)一下具體實(shí)現(xiàn)思路：目標(biāo)div 即需要生成滾動(dòng)條的div，里面嵌套了3個(gè)div，分別是用于顯示內(nèi)容的div_content，顯示豎向滾動(dòng)條的div_H,顯示橫向滾動(dòng)條的div_W,具體布局就是按照自帶滾動(dòng)條的div的布局一樣，然后顯示滾動(dòng)條的div即div_H和div_W有各自包含了3個(gè)div，即左右箭頭2個(gè)，滾動(dòng)條1個(gè)。具體代碼如下：

復(fù)制代碼代碼如下:

 
if($(_self).children(".jscroll-c").height()==null){ 
//添加內(nèi)容框(div) 
$(_self).wrapInner("<div class='jscroll-c' style='top:0px;z-index:9999;zoom:1;position:relative;'></div>"); 
//添加豎向滾動(dòng)條 
$(_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>"); 
//添加橫向滾動(dòng)條 
$(_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>"); 
} 

然后無(wú)非就是一些判斷，div的內(nèi)容是否超過(guò)了div的范圍，監(jiān)聽(tīng)事件的添加。具體代碼可見(jiàn)我的下載資源；

您可能感興趣的文章: