你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
wangzhonghua03

overthrow vs iscroll 1个回复 专栏 @ Javascript

wangzhonghua03 发布于 3 年前

引言

做移动web开发的同学,我想一定或多或少接触过页面局部滚动区域的场景开发,常见的有图片轮播,横向选项带等,那么你会怎么做呢?

介绍

业界关于这方面比较成熟的框架有iscroll5(最新的),overthrow等,当然还有针对图片轮播的jquery插件、gmu组件等。今天就聊聊overthow和iscroll的区别。

分析

从一般功能上看,overthow和iscroll实在太像,以至于一段时间内,我很纠结这两者究竟有何区别,哪个更好。今天就对比下二者区别,希望对有类似需求的同学有帮助。

功能

overthow实现了区域的局部滚动,包括横向和纵向,至于其他复杂的衍生功能,如图片轮播等则有些力不从心。
iscroll(以iscroll5为例),除了拥有局部滚动的主打功能外,衍生功能实在令人惊叹,如缩放、微视差滚动、无限下拉等, 无不让人咋舌。

基本原理

overthow告诉我们,原生的才是最好的。overthow尽可能的使用原生,如果原生支持局部滚动,那就使用原生,如ios5+的-webkit-overflow-scrolling:touch及android4+的overflow:auto;对于不支持原生滚动的,但支持touch属性的,则通过设置scrollTop及scrollLeft的值以及一定的算法模拟滚动(使用setInterval)。
iscroll告诉我们,自己动手丰衣足食。iscroll并没有考虑原生行为,而是通过模拟实现。因为iscroll要做很多事,而原生意味着不可控。iscroll通过使用css3动画以及帧动画(requestAnimationFrame)来模拟滚动,对区域滚动的行为、状态绝对可控,这样就可以大作文章,如知悉滚动位置,缩放控制等。

出发点

overthrow追求的是性能最优,小巧轻便,代码量仅有400多行。如果overthow想实现iscroll的功能,则有点难于上青天。
iscroll讲究的是功能的掌控力,高大上,代码量跻身于2000+行列。但不同的功能是以插件的形式存在,可根据需求配置。iscroll5比之前iscroll4不管从代码上,还是性能上,都进行了很大优化,不过性能肯定和原生比不了。

应用场景

其实从前面的对比,你应该可以有个大概了解了。

就写这些吧,欢迎讨论。

ps:iscroll5还没有进行深入的代码分析。

登录后回复,如无账号,请使用邀请码注册