一、插件介绍
当我在做项目的时修改，遇到一个问题，在一个很小的区域内，客户让我做一个带有滚动条的内容，而且这个区域内放的内容还不少。我想：怎么才能在有效的区域内放置更多的内容。翻开《jQuery权威指南2》，里边正好有这边一则插件，对于我来说很实用。于我我就采用了！结果还是很棒的！以下会有我的截图
这里是书中介绍的，我看的有点儿晕：“众所周知，在页面中实现滚动的效果不是太容易，尤其要兼容其他的浏览器，代码相对要复杂些，特别是兼容移动设备的浏览器。特别是兼容移动设备的浏览器。NiceScroll是一款完全基于jQuery框架的滚动条插件，它不仅有着类似iOS系统设备的滚动条外观，而且还支持任意的<div>、<iframe>、<body>元素的滚动效果，该滚动效果也完全兼容各类桌面和移动设备的主流浏览器。此外，该插件还拥有iOS系统设备中的触摸事件，比较适用于iOS系统设备中的页面展示。”
二、插件图片示例
本案图片
三、使用方法及使用参数
$("#id1").niceSroll("#id2",{
touchbehavior:true, //是否是触摸式滚动效果
cursorcolor:"#333", //滚动条的颜色值
cursoropacitymax:0.6, //滚动条的透明度值
cursorwidth:20, //滚动条的宽度值
background:#FF0000, //滚动条的背景色，默认是透明的
autohidemode:true, //滚动条是否是自动隐藏，默认值为 true ,表示是自动隐藏
boxzoom:true //是否显示放大镜标按钮，默认为false,表示不显示
});
四、使用教程
HTML代码：
<p>DIV里是图片</p> <div id="box1" class="bs"> <div class="scrimg"> <img src="images/pic10.jpg" /> <img src="images/pic10.jpg" /> <img src="images/pic10.jpg" /> <img src="images/pic10.jpg" /> <img src="images/pic10.jpg" /> </div> </div> <p>DIV里是内容</p> <div id="box2" class="bs"> <div id="content"> <h3>这是一个div区域</h3> <p class="p">内容区域</p> </div> </div> <p>DIV里是框架</p> <div id="box3" class="bs"> <!--iframe 自适应高度 --> <iframe src="http://www.baidu.com" height="100%" width="100%" frameborder="0" onload="$(this).height($(this).contents().height());"></iframe> </div>
JS代码：
<script type="text/javascript">
$(function() {
//图片区域显示滚动效果
$("#box1").niceScroll("#box1 div", {
touchbehavior: true,
cursorcolor: "#333",
cursoropacitymax: 0.6,
autohidemode: false,
boxzoom: false
});
//div区域显示滚动效果
$("#box2").niceScroll("#content", {
cursorcolor: "#666",
autohidemode: false,
boxzoom: true
});
//iframe区域显示滚动效果
$("#box3").niceScroll("iframe", {
cursorcolor: "#ccc",
autohidemode: false,
boxzoom: true
});
});
</script>