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

JavaScript011

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

simulation-scroll-y 是开源库 finger-mover 的一个插件，该插件的实现功能为移动端纵向模拟滚动。

基于 simulation-scroll-y 插件可以实现很多效果及功能，查看： Full demo

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 要划算的多。

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

看下图：

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

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

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

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

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

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

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

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

译文： https://alligator.io/vuejs/implementing-infinite-scroll/

本文将使用 Random User API (模拟后端返回数据)。该API将自己形容为“像Lorem Ipsum，但是对于人”。它不仅适用于此实现，而且对于模仿未来项目的用户配置文件也非常有用。

在你开始前，用 Vue CLI webpack-simple 项目模板创建一个新的 Vue.js 项目。此例子将分别用 Axios 和 MomentJS 来获取数据和日期格式。

$ vue init webpack-simple infinite-scroll-vuejs

有各种实现无限滚动的 npm 包，你可以使用你的 Vue 应用程序，但其中一些可能是太繁琐了。此文中，我们将不用那些插件或包，仅仅编写一个简单的 JavaScript 函数来实现无限滚动功能（当滚动到浏览器窗口底部时，获取一组新数据）。

在我们开始集成无限滚动之前，让我们在页面加载中获取并设置一些初始数据：

App.vue

注意：

Random User API 一次只会返回一个随机用户数据，为了获得5个用户数据，需要发起五次请求。

如果您在 console 看到了五个用户数据，那就OK了！让我们通过模板中的这些数据进行迭代，然后继续：

App.vue

现在你在此的目的......无限的滚动！ 在组件的方法中，您需要创建一个名为 scroll() 的新函数，并将其加载到 mounted() 生命周期方法中。

这个 scroll() 方法应该有一个简单的条件来计算页面的底部，判断它为true或false，并执行一些操作。我们将利用文档对象的 documentElement.scrollTop ， documentElement.offsetHeight 属性和窗口的 innerHeight 属性来确定是否滚动到底部：

在这种情况下，让我们添加一个GET方法，使用Axios从随机用户API中获取另一个随机用户。

此功能只会在用户滚动到页面底部时发起服务请求，并向人员数组添加一个新的随机“用户”。此时，您应该可以无限滚动...并每次看到新的“用户”。

无限滚动听起来吓人，但如所证明的那样，它非常简单。每次滚动到页面的底部时，我们都会使用 Axios 获取新数据，然后将这些数据推送到数组中。要延迟加载图像，只需将图像源推送到数据数组，在模板中遍历它，然后将 <img：src ="">绑定到数组。

ps： 此文核心就在【判断是否滚动到页面底部的逻辑上】，在此提供一个兼容性更好的写法，参考此文 滚动到底部加载更多 。

无限滚动意味着启动定时器，不管是用css3的animation还是js的timeout或者interval。

当时间间隔很短（操作执行时间>定时器周期）的时候，会造成队列程序执行来不及时，进程队列会在一段时间之后被占满，因此内存占用量就会变大。

避免队列占满就是将定时器的时间周期变得较长或者说使得..代码执行时间<定时器周期。