当先锋百科网

首页 1 2 3 4 5 6 7

滚动条插件nanoScroll的使用示例

之前用的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" target="_blank" rel="external nofollow"  />
  <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