移动端 IScroll 源码解读

子元素超过父元素的可视高度后，可以设置父元素的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，扩展更多的滑动效果，满足项目需求。

转载于:https://www.cnblogs.com/songych/p/5017809.html