一、 在使用iscroll的时候的注意事项:
1 引入iscroll.js文件
页面中head标签下引入 iscroll.js
2 引入初始化代码片段
编辑HTML结构 注意 iScroll作用于滚动区域的外层。只有容器元素的第一个子元素能进行滚动,其他子元素被忽略
初始化片段:
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
//wrapper:指的是容器的id。当然。类名也行
</script>
4 在容器添加overflow:hidden;
5 注意:当在动态生成的代码中使用,如有图片生成的情况下,注意好图片是否是已经生成
一下代码是获取生成的图片的长度,进而去判断是否全部生成,然后再调用iscroll事件
// 封装右侧图片的滚动,配合iscroll
function pyg_scroll() {
var imgLength = $(".right_class img").length;
$(".right_class img").on("load", function () {
// 判断,当图片长度为0的时候,初始化滚动条。因为每次加载完成,图片长度减减
imgLength--;
if (imgLength == 0) {
//初始化的iscroll
rightScroll = new IScroll('.right_class');
}
})
}
二、关于iscroll的点击回到顶部的代码片段
1 先生成一个iscroll对象,然后,调用自身的api
var myScroll = new IScroll('.left_list');//.left_list:指的是容器的类名,id也可以
myScroll.scrollToElement(this);//this:指的是当前点击的对象