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

[397023775qqcom]

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

安装&Usage

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

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

特性

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

• 压缩后只有 4kb

• 多手指触摸滚动元素时，并不会阻止滚动，且手指间的滚动衔接流畅，该功能的实现得益于Fingerd

• 当手指划出屏幕时不会影响运行。在很多手机浏览器中，当手指划出屏幕时，现有开源解决方案中的运动会卡住

• 支持下拉刷新，且给你完全自定义的机会

• 支持无限滚动(加载更多)

• 可以配合 simulation-scroll-x.js 实现 2d 滚动

• 支持滚动条

与现有解决方案的对比

移动端模拟滚动的库有很多，例如：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 选项。

[Explorare]

多谢推荐，资瓷一下。

[chairuosen]

违反广告法

[airyland]

这个划出屏幕的处理很用心，支持 recycle view 不？

[wly19960911]

@airyland 这是 js 吧，是前端…

[Yunhao]

很棒，感谢推荐

[fy]

@chairuosen 蛤蛤蛤