<!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="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li> <li>
<p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li>
<li>
<p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li> <li>
<p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li>
<li>
<p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li> <li>
<p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li> <li> <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li>
<li> <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li> <li> <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</p>
</li>
<li> <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="" alt="">,动动小指,告诉我你想吃啥呦。</p>
<p>晚上21:~:00进行配送.</p><p>电话: QQ:</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-;
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 = ; 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>

iscroll.js的更多相关文章

  1. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. jquery——移动端滚动条插件iScroll.js

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...

  3. 引用iScroll.js实现上拉和下拖刷新

    使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件 ...

  4. iScroll.js 用法参考 (share)

    分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...

  5. iScroll.js几个问题及其解决办法

    1.在一个页面中需要点击tab切换,而且每个切换的内容都需要下拉刷新加载,这个时候需要在点击的时候用到myScroll.refresh();这个函数,刷新iScroll.js这个函数. 2.在页面中有 ...

  6. iScroll.js和swiper.js

    最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...

  7. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  8. iscroll.js的使用

    入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化.每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的. 尽可能保持DOM结构的简洁.iScroll使用 ...

  9. 移动端下拉刷新,iScroll.js用法(转载)

    本文转载自: iScroll.js 用法参考 (share)

  10. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

随机推荐

  1. BZOJ2718: [Violet 4]毕业旅行

    2718: [Violet 4]毕业旅行 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 229  Solved: 126[Submit][Status ...

  2. -_-#【Backbone】Router

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. -_-#【Mac】快捷操作

    快捷键 command + 拖拽 = 剪切option + 拖拽 = 复制command + option + 拖拽 = 快捷方式 command + ] 前进command + [ 后退 comma ...

  4. 【动态规划】XMU 1588 01序列计数

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1588 题目大意: 给n1个0和n2个1,连续的0不超过k1个,连续的1不超过k2个.问 ...

  5. 彻底解决Unknown ASTNode child: LambdaExpression 错误

    错误原因:        在于 androidStudio lint检查的时候 会把Lamda表达式 认为是错误的.解决办法:    1.打开项目中中的lint.xml改为如下格式: <?xml ...

  6. mysql语法充电

    1.关键字delimiter 的作用 ①delimiter叫做“定界符”  ,经常可以在复合sql语句或者存储过程等语句中看到 DELIMITER $$ 的内容, ②DELIMITER $$的意义是告 ...

  7. Class Prefix(Xcode6以后设置类前缀)

    点开Xcode右侧Utilities,Project Document->Class Prefix  图片:prefix.png 

  8. poj1190 生日蛋糕 dfs

    题意:生日蛋糕有m层,总体积是V.从下向上,每一层的半径r和高度h都是递减的. 给m.v,求最小的表面积s.(不算底面接地的面积) 题目链接:poj1190 剪枝都还没加..样例输出都是错的...还没 ...

  9. java下载csv文件,中文标题

    @RequestMapping(value = "/export.do") public void exportpushuserByareacode(HttpServletRequ ...

  10. NDN与TCP/IP

    搬运自http://blog.csdn.net/programmer_at/article/details/49203241  当前TCP/IP协议存在哪些问题?如何改进? 当时没有回答好,然后提到了 ...