nicescorll插件使用总结

项目中使用到了nicescroll插件，在其中也有被坑到！在这写个总结先。

    nicescroll插件的样式可通过其提供的函数修改，但在这之前要先获得该对象，通过该对象的方法可对插件进行操作！

一、引入js文件

<script src="js/jquery-nicescroll/jquery.nicescroll.js"></script>

二、初始化插件、切修改插件的样式

var nice = false;
$(document).ready(
    function() {
        nice = $(".addText").niceScroll({
            cursorcolor: "#cac6c1",
            cursorborder: "#cac6c1",
            cursorwidth: "4px"
        })
    }
);

三、在页面中使用

<div class="outPut">
    <textarea class="addText" id="outputSample"></textarea>
</div>

      总结在本次项目中遇到的问题：

             在本次的项目中的某个页面上，因为有个测试参数窗口是隐藏的，它是通过我们的测试按钮的点击事件通过动画的形式展开！在展开的过程中就出现了问题了！

问题如下：

         在我们的隐藏的测试窗口展开的下方有个<textarea>使用了nicescroll，当测试窗口动画展开的时候，我们的滑动条的位置没有改变！依然还在原来的位置，造成了滚动条的位置错乱！测试窗口隐藏的时候也会出现同样的问题，主要是因为展开动画的时候，滚动条不能实时的定位自己的位置。

       解决的办法：

               在动画展开的函数中有可以有回调函数，可以在回调函数中调用我们的滚动条的重定位的方法，重新定位滚动条的位置！在这次的问题中我也知道要重新定位滚动条的位置，只不过官网上给的函数，如下：

      $("#mydiv").getNiceScroll().resize();

       总是在报：getNiceScroll().resize()   is  not  a function 的错误，还有我放置代码的位置不对！

        最后解决的方式是在动画的展开函数的回调中使用重定位的方法，代码如下：

$("html,body").animate({scrollTop: $("#testEditApiContent").offset().top - 80}, 300, function() {nice.resize();});

第二种 重定位滑动条的使用

一、引入js文件

<script src="js/jquery-nicescroll/jquery.nicescroll.js"></script>

二、初始化插件、切修改插件的样式

$(document).ready(
    function() {
        $(".addText").niceScroll({
            cursorcolor: "#cac6c1",
            cursorborder: "#cac6c1",
            cursorwidth: "4px"
        })
    }
);

三、在页面中使用

<div class="outPut">
    <textarea class="addText" id="outputSample"></textarea>
</div>

四、重定位滚动条的位置

$("#testEditApiContent").slideUp(300,function(){$("[name='editTestButton']").show();$(".addText").getNiceScroll().resize();});

总的来说：我对插件的使用还是生疏。

                  使用插件的时候可以多多的看看官网上的API ，看懂了再去用，每个插件的js文件中多有官网的网址，可以直接去查看。这次试用nicescroll插件的时候，自己没怎么看懂官网上的API，上述的两种的方式，无非就是第一种是在初始化的时候就已经获得了一个nicescroll插件的对象，重定位的时候去调用该对象的重定位的方法。而第二种在重定位的时候才去获得nicescroll插件的对象，再调用重定位滑动条位置的方法。