jquery 滚动条插件nanoScroller 的用法

             scroller 插件nanoScroller 用法

          默认滚动条是不是很丑,你可以他进行美化但是兼容性有问题,api是不是不够强大,自己用div做一个滚动条成本太大,这里给你推荐一款jquery 插件nanoscroller ,网上关于nanoscroller 的介绍不太多,github上有代码但是没有demo,使用其实很简单,但是还是稍微介绍一下减少学习的成本,

         引入的类库 jquery.nanoscroller.js

         引入的css库nanoscroller.css

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>

content 里边放置内容,请注意内层的nano-content 不要丢失,控件内部默认的在这个节点下查询,

$(".nano").nanoScroller({ scroll: 'top' });
$(".nano").nanoScroller({ scroll: 'bottom' });
$(".nano").nanoScroller({ scrollTop: value });
$(".nano").nanoScroller({ scrollBottom: value });
$(".nano").nanoScroller({ scrollTo: $('#a_node') });

 更简单的方式那就直接使用我的示例代码吧
jquery 滚动条插件nanoScroller 的用法
 

相关推荐