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

好了，我遇到的问题都解决了。若是你也使用这款插件，而且遇到了上面的问题，但愿这篇文章能对你有所帮助。