iScroll使用心得

iScroll是一个用来控制页面滚动的jquery插件 官方地址：http://cubiq.org/iscroll-4，官方那边有例子和说明，不过是英文的，这边不多做介绍，需要的朋友可以去网上搜下，有很多中文介绍，这边主要是说下，使用中碰到的问题和解决方案。

iScroll的实现原理是这样的：它绑定了一个DIV，设置当前的div的overflow：hidden；获取当前div的高度，然后计算内部第一个元素的高度，如果内部第一个元素的高度大于div的高度，就可以内部滚动。其实这个和pc上写一个内部滚动是相同的。所以它对样式有一定的要求。绑定的DIV需要是position: absolute，而且它只能把div内的第一个元素滚动。所以如果想要DIV内部全部元素可以滚动的话，就要使用一个区域的DOM元素作为DIV的第一个元素，例如：div，ul之类。

因为初始化数据、上拉刷新  加载数据、下拉加载更多 加载数据，使用的是ajax方式取得json，ajax请求数据是异步的。当给iscroll的div加载数据是要主动调用refresh()方法，才能正常显示滚动条和和滚动定位，所以要在请求到json数据，并添加到iscroll之后，在ajax回调方法调用refresh()，这个时机比较适合。官方给的是直接for循环加入iscrooll的，所有添加内容没有延时，可以接着直接调用refresh()。

相同的。所以它对样式有一定的要求。绑定的DIV需要是position: absolute，而且它只能把div内的第一个元素滚动。所以如果想要DIV内部全部元素可以滚动的话，就要使用一个区域的DOM元素作为DIV的第一个元素，例如：div，ul之类。

参考网址：http://www.yingxiangzhi.com/blog/?p=1434
http://blog.sina.com.cn/s/blog_5e5082510101ehdr.html
http://www.gafish.net/api/iScroll.html
http://cubiq.org/iscroll-4