滚动条插件nanoScroll的使用示例

最新推荐文章于 2023-09-20 15:09:10 发布

vcxiaohan2

最新推荐文章于 2023-09-20 15:09:10 发布

阅读量1.6k

点赞数 1

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/50044917

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

之前用的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

vcxiaohan2

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动条插件nanoScroll的使用示例

之前用的perfectScroll插件，结果坑的不行，最低只能兼容到ie9(还很牵强)，后来不得不改改改。。。之后找到了一款比较好的插件nonascroll，完美兼容ie8，不过网上的介绍很少，如果不知道细节的话，应用在项目里出了bug都不知道在哪里,所以研究了一番，把容易出bug的细节都标了出来，供大家参考：以下代码为最简单的示例： Demo
复制链接

扫一扫