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");
                }
            };

好了，我遇到的问题都解决了。如果你也使用这款插件，并且遇到了上面的问题，希望这篇文章能对你有所帮助。