滚动条插件NiceScroll（如何调用jQuery插件学习第十四天）

本文链接：https://blog.csdn.net/weixin_42306620/article/details/82349056

在页面中实现滚动效果不是很容易，尤其是其他的浏览器，代码相对要复杂些，特别是兼容移动设备的浏览器。NiceScroll是一款完全基于jQuery框架的滚动条插件，它不仅有着类似IOS系统设备的滚动条外观，而且还支持任意的<div>，<iframe>，<body>元素的滚动效果，该滚动效果也完全兼容各类桌面和移动设备的主流浏览器。此外该插件还拥有IOS系统设备中的触摸事件，比较适合用于IOS系统设备中的页面展示。

NiceScroll插件的使用：

（1）插件文件：

Js-8-14/jquery.niceScroll.js

（2）下载地址：

http://areaaperta.com/nicescroll

（3）功能描述：

在页面中添加三个用于元素滚动的区域。第一个区域用于图片的滚动查看，第二个区域用于一个<div>元素的滚动查看，第三个区域用于一个<iframe>元素的滚动查看。当页面加载完成后，分别查看这三个区域各元素的滚动效果。

（4）实现代码：

<script src="Jscript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Js-8-14/jquery.nicescroll.js" type="text/javascript"></script>

<style type="text/css">
    body{font:13px/1.6 Georgia, serif;color:#333}
    .bs{padding:5px;height:120px;margin:10px 0px;
        border:1px solid #555; overflow:auto;width:680px}
    .bs .scrimg{width:762px}
    .bs .scrimg img{width:150px; height:200px}
    .p{height:500px}
</style>

<script type="text/javascript">
    $(function() {
        //图片区域显示滚动效果
        $("#Box_Scr_1").niceScroll("#Box_Scr_1 div",{
            touchbehavior: true,
            cursorcolor: "#333",
            cursoropacitymax: 0.6,
            autohidemode: false,
            boxzoom: true
        });
        //div区域显示滚动效果
        $("#Box_Scr_2").niceScroll("#content",{
            cursorcolor: "#666",
            autohidemode: false,
            boxzoom: true
        });
        //iframe区域显示滚动效果
        $("#Box_Scr_3").niceScroll("iframe",{
            cursorcolor: "#666",
            autohidemode: false,
            boxzoom: true
        });
    });
</script>

<div id="Box_Scr_1" class="bs">
    <div class="scrimg">
        <img src="Images-8-14/pic10.jpg" onmousedown="return false"/>
        <img src="Images-8-14/pic10.jpg" onmousedown="return false"/>
        <img src="Images-8-14/pic10.jpg" onmousedown="return false"/>
        <img src="Images-8-14/pic10.jpg" onmousedown="return false"/>
        <img src="Images-8-14/pic10.jpg" onmousedown="return false"/>
    </div>
</div>
<div id="Box_Scr_2" class="bs">
    <div class="content">
       <h3>这是div区域</h3>
       <p class="p">内容区域</p>
    </div>
</div>
<div id="Box_Scr_3" class="bs">
    <iframe scr="8-14-1.html" height="100%"
        width="100" frameborder="0"
        onload="$(this).height($(this).contents().height());">
    </iframe>
</div>

在这个例子中，<iframe>元素的src属性中导入了一个名为"8-14-1"的HTML页面文件，该文件代码如下：

<style type="text/css">
    body{font:13px/1.6 Georgia, serif;color:#333}
    p{height:500px}
</style>

<div>
    <h3>这是一个iframe</h3>
    <p>内容区域</p>
</div>

（5）代码解析：

在这个例子中，第一个区域用于图片的滚动查看。在该区域中，图片区的宽度已超出外围区域的宽度，因此，通过下来代码将图片区与滚动条插件绑定：

//图片区域显示滚动效果
$("#Box_Scr_1").niceScroll("#Box_Scr_1 div",{
    touchbehavior: true,
    cursorcolor: "#333",
    cursoropacitymax: 0.6,
    autohidemode: false,
    boxzoom: true
});

上述代码中，$("#Box_Scr_1")表示获取图片的外围区域，niceScroll()方法中的实参"#Box_Scr_1"，表示插件被绑定的滚动区域元素标识，本示例中用的ID属性，也可以使用元素的其他属性来标识被插件绑定的滚动区域。

第二个参数为一个选项对象，在该对象中，可以设置元素在被滚动插件定时的各类属性，如"boxzoom"属性表示是否显示放大的图标，如果该值为true，将在滚动条最上方显示一个图标，单击该图标时，将直接显示滚动条区域中的内容；在该内容区域中，可以单击右上角的图标返回内容区域的上级容器页面。

另外两个区域分别使用滚动条与<div>和<iframe>元素相绑定，使用这两个元素在高度超过外围高度值时，可以通过拖动滚动条进行查看，其绑定的方法与第一外区域基本相同，只是在设置滚动条的颜色时，各有差异。另外，如果需要将<body>元素与滚动条插件相绑定时，只需要加入如下代码：

$("body").niceScroll();

与其他jQuery插件相类似，滚动条插件NiceScroll()在调用niceScroll()时，也自带一个可选项对象options，通过该对象可以设置绑定滚动时的相关属性。该对象的一些常用属性如下所示：

**options对象中的常用参数**
参数名称	功能描述
touchbehavior	是否是触摸模式滚动效果。
cursorcolor	滚动条的颜色值。
cursoropacitymax	滚动条的透明度值。
cursorwidth	滚动条的宽度值。
background	滚动条的背景色。
autohidemode	滚动条是否是自动隐藏，默认值为true，表示是自动隐藏。
boxzoom	是否显示放大图标按钮，默认值为false，表示不显示。