滚动条插件nanoScroll的使用示例

来源：互联网发布：c语言的缺陷与陷阱pdf 编辑：程序博客网时间：2024/05/21 08:24

之前用的perfectScroll插件，结果坑的不行，最低只能兼容到ie9(还很牵强)，后来不得不改改改。。。

之后找到了一款比较好的插件nonascroll，完美兼容ie8，不过网上的介绍很少，如果不知道细节的话，应用在项目里出了bug都不知道在哪里,所以研究了一番，把容易出bug的细节都标了出来，供大家参考：

以下代码为最简单的示例：

<!doctype html><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Demo</title>  <link rel="stylesheet" href="skin/base2/css/nanoscroller.css" />  <script type="text/javascript" src="skin/base2/js/jquery-1.10.1.min.js"></script>  <script type="text/javascript" src="skin/base2/js/nanoScroller.js"></script>  <style>    .nano {        width: 500px;         height: 100px;        background: red;    }    .content {        /*不能设置position:relative;*/        /*不能设置高度*/        /*出现bug设置padding:0;试试*/        background: blue;    }    </style><script type="text/javascript">        $(function(){        $(".nano").nanoScroller();    });</script></head><body><div class="nano"><!--nano必需，不写样式会错乱-->    <div class="content"> <!--content必需，不写会出现"Cannot read property 'style' of undefined"错误-->        <br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br /><br />1<br />    </div></div></body></html>

最后贴上一个示例网址：

http://zha-zi.iteye.com/blog/2161165

1 0