国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

利用div+jquery自定義滾動條樣式的2種方法

2019-11-20 22:30:40
字體:
來源:轉載
供稿:網友
最近做項目中有一個模塊是用于實時監控的,左邊有個菜單欄用于顯示所有的設備,那當然是從數據庫中動態獲取的了,右邊是個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的范圍,監聽事件的添加。具體代碼可見我的下載資源;
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 南漳县| 翁源县| 都江堰市| 武邑县| 汶川县| 海南省| 清新县| 石家庄市| 忻州市| 合川市| 汽车| 平度市| 陆良县| 安宁市| 唐河县| 当阳市| 雷波县| 稻城县| 蓝山县| 八宿县| 招远市| 涿州市| 灵川县| 东平县| 沧源| 昂仁县| 丰镇市| 五指山市| 绵竹市| 冷水江市| 静宁县| 万年县| 阿坝县| 保德县| 平顶山市| 连云港市| 平罗县| 哈巴河县| 萨嘎县| 淅川县| 宁国市|