首頁 > web前端 > js教程 > 利用div jquery自訂捲軸樣式的2種方法_jquery

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

WBOY
發布: 2016-05-16 17:28:20
原創
1226 人瀏覽過

最近做專案中有一個模組是用來即時監控的,左邊有個選單列用來顯示所有的設備,那當然是從資料庫動態取得的了,右邊是個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).child(_self). (".jscroll-c").height()==null){
//新增內容框(div)
$(_self).wrapInner("
");
//新增垂直捲軸
$(_self).append("
");
//新增橫向捲軸
$(_self).append("
");
}

然後無非就是一些判斷,div的內容是否超過了div的範圍,監聽事件的添加。具體程式碼可見我的下載資源;
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板