关闭

iscroll原理

1794人阅读 评论(0) 收藏 举报

做过移动端开发的应该多少听过iscroll,iscroll是用来模拟移动端滚动效果的库

iscroll的出现

移动app的布局一般是顶部header+固定高度内容区+footer

这种需求在PC端很简单,header、footer用固定定位,content设置上下margin和overflow:scroll,就ok了,木有啥问题

但是在移动端,首先关于position:fixed,这篇文章对于fixed属性在移动端的问题做了总结;其次,固定高度内容区域的滚动问题,overflow:scroll在移动端是怎样的效果,大家可以写个demo试试,完全没有原生应用那种滚动的流畅感,好在webkit支持了-webkit-overflow-scrolling:touch,于是在ios7以上可以实现区域原生滚动效果了,点这里看效果,ios6和ios5的设备po主没有,谁有的话可以帮忙测测哈

iscroll的出现就是为了实现固定高度区域的原生滚动效果。

 

原理

iscroll的核心由三大事件组成

touchstart

做一些初始化的操作,包括对触摸的位置,时间,是否在滚动-move等值的初始化

 

touchmove

首先判断手是否移动距离小于6px,也就是手按着没有动,那么就不做任何处理

move=true

然后计算要滚动到的新的位置newY=oldY+deltaY

判断newY是否已经超出页面边界,是的话降低滚动速度

将页面滚动到新的位置,通过设置transform

每隔300ms重置一次触摸开始时间和结束时间

 

touchend

首先也是初始化的操作,在手指离开前做了状态保存

判断是否是点击事件(move是否为true),如果是的话,createEvent,然后触发该事件

如果不是点击事件,则惯性滚动到目地位置,

变速滚动是利用requestAnimation来实现的

为什么不用css3呢,因为css3无法实现控制精细的加速减速的效果

 

 

 

源码片段解析

start

 

move

end