angular 滾動條插件

因為工作上的要求，需要美化滾動條樣式，自己又沒有時間來寫了，只好上網找一個現成的插件來使用，最先考慮的niceScroll 插件，但是發現在內容增加的時候，nicescroll沒有辦法重新出發滾動條長短（或者是我自己沒找對方法），后來有試用了jqueryScrollbar這個插件。雖然調試過程中也遇到了問題，但最終都解決了。下面就是我具體遇到的問題，和解決的辦法

• 使用插件

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

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

 

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

必須先引用jquery庫，再引用angular.js。然后再引用jquery.scrollBar.js 。不然瀏覽器會報錯。

• 內容因為重新獲取數據的時候增加，

經常會遇到這樣的情況，剛開始內容不多，不需要滾動條，但是我們有一個增加內容的按鈕，或者是點擊按鈕，對應的內容會出現，這樣內容的長度就超出了父元素的高度，這時候就會出現滾動條，並且隨着內容的不斷增加，滾動條需要重新自己需要滾動的具體長度。jqueryScrollBar這個插件有一個屬性就可以實現內容增加時，重新計算滾動條長度。這個屬性是autoUpdate，把他設置為true。

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

例如，我需要滾動的元素id值是nice，那么nice就應該有一個具體的高度，這個高度不能寫在行內style里面，需要寫在.css文件里，因為行內的style屬性會被scrollBar重置。但是如果高度不是固定的一個數值，而是一個變量怎么辦？這就需要scrollBar的onInit方法，這個方法是在插件開始執行時最先執行的函數，而且不會被后面的計算覆蓋掉。所以上面的代碼需要改動一下：

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

好了，我遇到的問題都解決了。如果你也使用這款插件，並且遇到了上面的問題，希望這篇文章能對你有所幫助。