angular 滾動條插件

由於工做上的要求，須要美化滾動條樣式，本身又沒有時間來寫了，只好上網找一個現成的插件來使用，最早考慮的niceScroll 插件，可是發如今內容增長的時候，nicescroll沒有辦法從新出發滾動條長短（或者是我本身沒找對方法），後來有試用了jqueryScrollbar這個插件。雖然調試過程當中也遇到了問題，但最終都解決了。下面就是我具體遇到的問題，和解決的辦法

• 使用插件

　　　　直接在須要滾動條的元素上添加一個屬性：data-jquery-scrollbar="jqueryScrollbarOptions"，而後在當前的scope中添加下面的代碼：

1 $scope.jqueryScrollbarOptions = {
2                 "type": "simpble"6             };

 

• 文件的引用順序不能改變，

必須先引用jquery庫，再引用angular.js。而後再引用jquery.scrollBar.js 。否則瀏覽器會報錯。

• 內容由於從新獲取數據的時候增長，

常常會遇到這樣的狀況，剛開始內容很少，不須要滾動條，可是咱們有一個增長內容的按鈕，或者是點擊按鈕，對應的內容會出現，這樣內容的長度就超出了父元素的高度，這時候就會出現滾動條，而且隨着內容的不斷增長，滾動條須要從新本身須要滾動的具體長度。jqueryScrollBar這個插件有一個屬性就能夠實現內容增長時，從新計算滾動條長度。這個屬性是autoUpdate，把他設置爲true。

• 須要滾動的元素必須有具體的高度

例如，我須要滾動的元素id值是nice，那麼nice就應該有一個具體的高度，這個高度不能寫在行內style裏面，須要寫在.css文件裏，由於行內的style屬性會被scrollBar重置。可是若是高度不是固定的一個數值，而是一個變量怎麼辦？這就須要scrollBar的onInit方法，這個方法是在插件開始執行時最早執行的函數，並且不會被後面的計算覆蓋掉。因此上面的代碼須要改動一下：

1 $scope.jqueryScrollbarOptions = {
2                 "type": "simpble",
3                 "onInit":function(){
4                     jQuery('.scrollbar-dynamic').height (docHeight + "px");
5                 }
6             };

好了，我遇到的問題都解決了。若是你也使用這款插件，而且遇到了上面的問題，但願這篇文章能對你有所幫助。