iScroll.js 出坑指南

因为需求所以用到iScroll.js ，因为本人英语渣，再加上没有找到官方的中文API文档，通过浏览各位大神的博客结合本人在项目中的实际操作总结出一些微不足道的经验，记录之：

首先埋一下坑，因为iscroll 4+ 版本（以下称为I4）和iscroll 5+ （I5）改动较大，所以在引入的使用确认自己使用的是iscroll的哪个版本的，之前用I4的方法，但是引用的I5的文件，以至于调了一晚上的bug，最后才发现是自己太傻了。现在总结一下不同之处（只是目前本人遇到的，因为没有看源码，目前还不知道所有）

1、首先是iscroll的实例化方式 : I5中实例改为大写的I，可能是为了代码的规范吧，其次就是目标由原来的只能是DOM对象或者id改成可以支持DOM对象和选择器选择，源码中的选择方式是document.querySelector(el)，而不再是document.getElementById(el);

I4 
var scroller = new iScroll('id');  
  
I5  
var scroller = new IScroll('#id');

2、I5不再对目标添加overflow:hidden属性，有需求可以自行添加,一般情况下都是需要添加的，看具体需求

3、I5的事件也不再是在option里面写了，而是仿造jquery的on绑定事件的方式。

I4  
var scroller = new iScroll('id',{  
     scrollStart : function(){  
        console.log('scroll started');  
     }  
});  
  
I5  
var scroller = new IScroll('#id');  
scroller.on('scrollStart', function () { console.log('scroll started'); });

4、横向滚动 I4和 I5 参数不同

I5
var heng = new IScroll(box, {
	scrollX: true,//可以设置是否显示横向或纵向scrollY滚动条
});

I4
var heng = new iScroll(box, {
	hScroll:true, // false 禁止横向滚动 true横向滚动   默认为true                
});

5、

文章评论