子元素超过父元素的可视高度后,可以设置父元素的overflow:auto,但是这样会产生滚动条,IScroll框架解决了滚动条的问题,并且提高了用户的体验,如当用户可以拖动元素超过边界,释放后元素会弹回。
此文介绍IScroll源码中的一些知识点。
1. 事件绑定
移动端主要用到touchstart,touchmove,touchend,transitionEnd几个事件,IScroll绑定事件监听函数的主要代码为 eventType(this.wrapper, 'touchstart', this);即 this.wrapper.addEventListener('touchstart',this),看到这里你可能会感到疑惑,this那里不应该是个事件处理函数吗?this指向了IScroll对象,这种方式也可以给元素绑定事件监听函数,即el.addEventListener(someEvent,obj),当在该元素上触发事件时,JS引擎会调用对象obj的handleEvent函数并执行,同时将事件对象event传入,相信你会在IScroll源码中看到IScroll构造函数的原型prototype中的handleEvent函数。
2. IScroll中的动画
源码中主要用到_translate()和scrollTo()来进行动画处理,scrollTo()在调用_translate()的基础上设置了动画时间transition-duration和动画过渡效果transition-timing-function。调用scrollTo()后会触发transitionEnd事件。
3. IScroll的自定义
IScroll中通过_execEvent()函数来进行事件处理的自定义,用户可通过new IScroll().on() 方法来自定义事件及事件处理函数,比如在源码_move()代码最后添加this._execEvent('scroll'),并自定义var iscroller = new IScroll(); iscroller.on('scroll',funtion(){});这样在_move()执行的最后就会调用用户自定义的事件处理函数,用户通过这种方式可以方便的扩展IScroll,扩展更多的滑动效果,满足项目需求。