<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iscroll.js</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://files.cnblogs.com/xinlinux/iscroll.js"></script> <style type="text/css"> #wrapper{ overflow:hidden; } </style> </head> <body> <div id="wrapper" class="c1"> <div id="scroller"> <ul> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> <li> <p>亲们挨饿，我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">，动动小指，告诉我你想吃啥呦。</p> <p>晚上21:00~23:00进行配送.</p><p>电话：18829242503 QQ：2476403790</p> </li> </ul> </div> </div> <script> $(function(){ $('body,html').css('overflow','hidden'); loaded("wrapper","c1","scroller"); }) function loaded(id,part,nextD){ var minH = document.documentElement.clientHeight || document.body.clientHeight; var offT = $('.'+part).offset().top; var offH = $('#'+nextD).height(); var boxMinH = minH-offT-10; if(boxMinH<=offH){ $('.'+part).css({'height':boxMinH+'px'}) } myScroll = new iScroll(id,{vScrollbar:false,hScroll:false,fixedScrollbar:true}) } </script> </body> </html>
iScroll里传递的参数 iScroll里的第二个参数允许你自定义一些内容，比如下面的这段代码： <script> var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false}); </script> 第二个参数通常都是一个对象，像上面的这个例子里就设定了不显示滚动条。常用的参数如下： hScroll false 禁止横向滚动 true横向滚动 默认为true vScroll false 精致垂直滚动 true垂直滚动 默认为true hScrollbar false隐藏水平方向上的滚动条 vScrollbar false 隐藏垂直方向上的滚动条 fixedScrollbar 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出 scroller的可见区域。默认在Android上为true， iOS上为false fadeScrollbar false 指定在无渐隐效果时隐藏滚动条 hideScrollbar 在没有用户交互时隐藏滚动条 默认为true bounce 启用或禁用边界的反弹，默认为true momentum 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用 lockDirection false取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right） 为了保持资源的完整性，建议去除滚动条
// 详细解释：
<script> $(function(){ $('body,html').css('overflow','hidden'); loaded("wrapper","c1","scroller"); }) function loaded(id,part,nextD){ var minH = document.documentElement.clientHeight || document.body.clientHeight; var offT = $('.'+part).offset().top; var offH = $('#'+nextD).height(); var boxMinH = 200; alert(minH); //BOdy页面高度; alert(offT); // this 距离上面的距离; alert(offH); // 内容的高度; alert(boxMinH); // 显示内容的高度; if(boxMinH<=offH){ $('.'+part).css({'height':boxMinH+'px'}) } myScroll = new iScroll(id,{vScrollbar:false,hScroll:false,fixedScrollbar:true}) } </script>