目前为止实现最好的 js 模拟滚动功能

2017-05-13 17:06:24 +08:00
 397023775qqcom

simulation-scroll-y 是开源库 finger-mover 的一个插件,该插件的实现功能为移动端纵向模拟滚动。 基于 simulation-scroll-y 插件可以实现很多效果及功能,查看:Full demo

安装&Usage

finger-mover提供中英双语文档。

安装和使用官方文档写的很清楚,这里就贴出地址:finger-mover 中文文档

特性

根据文档介绍他有如下特性:

与现有解决方案的对比

移动端模拟滚动的库有很多,例如:iscroll、xscroll、better-scroll 等等,那为什么还要一个 simulation-scroll-y 呢?答案是:这并不是一个轮子。不妨做如下对比:

一、库体积

库体积很大一部分是由框架所提供的功能决定的,但是在完成相同功能的前提下,simulation-scroll-y 应该算是最小的。

simulation-scroll-y 作为 finger-mover 的插件,其体积只有 4.42kb,即使加上 finger-mover 本身的 11.12kb 也才只有 15.54kb,关键是 finger-mover 还提供了其他移动的插件,供你选择。

如果你仅仅要实现一个模拟滚动已经下拉刷新、无限滚动的功能,那么使用 simulation-scroll-y 要比你一次性的引入其他框架如 iscroll 等要小的多。如果你要实现轮播图,完全可以使用 finger-mover 的轮播图插件,这比你使用 swiper 要划算的多。

二、IOS 系统部分浏览器,手指划出屏幕,运动卡住

在 UC 浏览器,手机 QQ 内的 webview 都会出现此类问题。

看下图:

simulation-scroll-y 则不会出现这样的问题:

三、多手指操作问题

大多数的实现中,当多指操作时,会阻止运动,如下图:

另外一些不阻止滚动的实现中,虽然能滚动,但是也会出现奇葩的 bug,如下图所示:

在这个实现中,虽然当第二根手指触摸屏幕时依然能够滚动,但是当拿开第一个手指时,连续滑动第二根手指,第二根手指并不能操作滚动元素,且在第二根手指滑动的过程中,连续使用第一根手指点按屏幕,会出现奇葩滚动动作。

以上问题,在 simulation-scroll-y 则不会出现,无论有几根手指触摸屏幕,simulation-scroll-y 都将控制权交给第一根手指,如果第一个手指拿开,那么第二根手指将继承第一根手指的状态,完美衔接滚动,此功能的实现得益于 Fingerd,如下图:

四、下拉刷新的问题

一些现有实现中,在下拉刷新后,迅速上滑,然后再滑动下来,你会发现下拉挂掉了,永远收不回去,如下图:

另外的一些实现则规定了下拉刷新的形式:下拉后是停留等待 还是 不停留等待

simulation-scroll-y 则是完全给你自定义下拉操作的机会,你可以实现任何形式的下拉刷新操作,另外 simulation-scroll-y 在你滚动页面的过程中完全不会影响下拉操作,详情请查看 pullDown 选项。

5557 次点击
所在节点    JavaScript
6 条回复
Explorare
2017-05-13 17:37:32 +08:00
多谢推荐,资瓷一下。
chairuosen
2017-05-13 17:39:56 +08:00
违反广告法
airyland
2017-05-13 17:50:20 +08:00
这个划出屏幕的处理很用心,支持 recycle view 不?
wly19960911
2017-05-13 18:10:35 +08:00
@airyland 这是 js 吧,是前端…
Yunhao
2017-05-14 00:40:50 +08:00
很棒,感谢推荐
fy
2017-05-14 14:26:10 +08:00
@chairuosen 蛤蛤蛤

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/361105

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX