Scroll 最基本例子

来源：互联网发布：mac屏幕涂层脱落怎么办编辑：程序博客网时间：2024/06/05 11:15

Scroll 的一个最基本的例子 + 使用中一些小技巧

首先这是最基本的格式

<div id="wrapper"><ul><li>11111</li><li>22222</li><li>33333</li><li>44444</li><li>55555</li><li>66666</li><li>77777</li><li>88888</li><li>99999</li></ul></div>

这样ul就可以滚动了 wrapper下紧跟着的

如果wrapper下还有其他的div 就要这样写

<div id="wrapper"><div id="scroller"><div id="down"></div><ul><li>11111</li><li>22222</li><li>33333</li><li>44444</li><li>55555</li><li>66666</li><li>77777</li><li>88888</li><li>99999</li></ul></div></div>

<script type="text/javascript">var myScroll;function loaded() {myScroll = new IScroll('#wrapper', {minScrollY : 40,checkDOMChanges : true //当DOM改变时 自动检测});myScroll.on("scrollEnd", function() {// 判断是否下拉刷新if (this.y == 40) {// 此处执行下拉刷新部分的代码，目前采用alert("开始刷新");setTimeout(function() {}, 800);}});myScroll.scrollTo(0, -document.querySelector('#wrapper').clientHeight, 1);}document.addEventListener('touchmove', function(e) {e.preventDefault();}, false);</script>

当

checkDOMChanges : true

不起作用时可以用 myScroll.refresh();

有时候需要定位滚动条的位置

myScroll.scrollTo(x, y, time,true/false);

x：x轴位置

y：y轴位置

time：多长时间完成

true/false：是否相对于当前位置偏移

例：myScroll.scrollTo(0, -100, 600); 向下移动100像素注意是负数

关于如何到达最下面

myScroll.scrollTo(0, -document.querySelector('#wrapper').clientHeight, 1);

myScroll.scrollTo(0, -document.querySelector('#scroller').clientHeight, 1);

这个方法有个缺点：每次页面从上边下来效果上有点出乎意料不过还是很有用的

源码下载：http://download.csdn.net/detail/laigezao/8974019

0 0