<p>官网：<a href="http://cubiq.org/iscroll-5" target="_blank">http://cubiq.org/iscroll-5</a><br>
</p>
<p>demo:<br>
</p>
<p>滚动刷新：<a href="http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/" target="_blank">http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/</a><br>
</p>
<p style="text-align: center"><img alt="" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-0237064bdaa5138c13ab281dd177548e.png"></p>
<p><a href="http://cubiq.org/dropbox/iscroll4/examples/carousel/" target="_blank"> 'Carousel' demo</a><br>
</p>
<p style="text-align: center"><img alt="" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-7cab5e0f8660635689850d40e224b11a.png"></p>
<p>iScroll功能很强大，目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项。<br>
</p>
<p><span style="color: #0000ff"><strong>一、用法</strong></span><br>
</p>
<p>iScroll对要滚动的元素进行初始化，且不限制一个页面中使用iScroll的元素个数。<br>
</p>
<p>使用iScroll时，DOM树的结构要足够简单，移除不必要的标签，避免过多的标签嵌套。<br>
</p>
<p><strong>1、html部分</strong><br>
</p>
<p>1.1、最优最简单的iScroll结构<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div> </pre>
</div>
<p>本例中,ul标签将被滚动。iScroll一定要与滚动内容外的wrapper配合才能生效。<br>
</p>
<p>1.2、只有wrapper里的第一个子元素才可以滚动 <br>
</p>
<p>因为只有wrapper里的第一个子元素才科院滚动，所以要让多个元素滚动 ，写法如下：<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div> </pre>
</div>
<p>scroller这个元素可以滚动，即便它包含两个ul元素。<br>
</p>
<p><strong>2、js调用部分 </strong><br>
</p>
<p>2.1 、使用onDomContentLoaded事件实现滚动<br>
</p>
<p>适用于滚动内容只包含文字、图片，并且所有的图片都有固定的尺寸 <br>
</p>
<div class="blockcode">
<pre class="brush:js;">
<script src="iscroll.js"></script>
<script>
var myscroll; //myscroll是全局变量，可以在任意地方调用
function loaded(){
myscroll=new iScroll("wrapper");
} window.addEventListener("DOMContentLoaded",loaded,false);
</script> </pre>
</div>
<p>2.2、使用onLoad事件实现滚动<br>
</p>
<p>因为DOMContentLoaded事件是载入DOM结构后就会被调用，所以在图片等元素未载入前可能无法确定滚动区域的长宽，此时可以使用onLoad事件来实现。</p>
<div class="blockcode">
<pre class="brush:js;">
<script src="iscroll.js"><script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
}，100 );
}
window.addEventListener("load",loaded,false);
</script> </pre>
</div>
<p>这种情况下iScroll会在页面资源（包括图片）加载完毕100ms之后得到初始化，这应该是一种比较安全的调用iScroll的方式。<br>
</p>
<p>2.3、弹框中的滚动条加载 <br>
</p>
<p>弹框一般用display:none和display:block切换来实现。 <br>
</p>
<p>display:none的元素浏览器没有渲染，所以无法计算滚动内容的高度。<br>
</p>
<p>所以在弹框调用show()显示出来后，再实例化滚动条区域。如下：<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
$("#mobile_show_duobao_all_num").show();
new iScroll('tc-wrapper2', {
scrollbarClass: 'myScrollbar' ,
hScrollbar:false,
vScroll:true,
hideScrollbar: false //是否隐藏滚动条
}); </pre>
</div>
<p><span style="color: #ff0000">提示：出现滑动屏幕时，整个页面滑动的兼容性问题，解决办法如下：</span><br>
</p>
<div class="blockcode">
<pre class="brush:js;">
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); </pre>
</div>
<p>2.4、iScroll传参<br>
</p>
<p>iScroll里的第二个参数允许你自定义一些内容，比如是否隐藏滚动条等。常用参数如下：<br>
</p>
<p>hScroll false 禁止横向滚动 true横向滚动 默认为true<br>
vScroll false 精致垂直滚动 true垂直滚动 默认为true<br>
hScrollbar false隐藏水平方向上的滚动条<br>
vScrollbar false 隐藏垂直方向上的滚动条<br>
fixedScrollbar 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出<br>
scroller的可见区域。默认在Android上为true， iOS上为false<br>
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条<br>
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true<br>
bounce 启用或禁用边界的反弹，默认为true<br>
momentum 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用<br>
lockDirection false取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）</p>
<p>2.5、通用方法<br>
|
|
转播
