Scroll 最基本例子

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>

JS

<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