移动端模拟滚动

背景

由于移动端原生滚动的局限性以及兼容性，部分特定场景的需求无法满足。例如，笔者最近就接了一个需求：整个页面分为三块，每块内容的高度不等（但都超过一屏），要求滚动到内容的临界点有一个停顿的效果，下拉可以看到下一块的部分内容，满足条件则滑到下一块内容。这种场景下，原生的滚动根本无法支持。因此，本文的主角就亮相了：模拟滚动，即尽可能的模拟原生滚动，但是又提供了一些扩展，满足复杂场景的需求。

本文将从模拟滚动需要实现的功能、技术分析和方案来进行阐述，通读本文，读者将对模拟滚动的常见功能和技术要点有一定了解。

示例：模拟滚动

知识点

通过移动端的touch系列事件触发模拟滚动，获取手指滑动的偏移量，进而改变translateY来进行位置偏移。

滚动容器

滚动容器拥有高度，滚动区域的高度大于滚动容器，在滚动时，我们对滚动区域进行偏移，以达到滚动的视觉效果。

通过滚动区域的高度可以通过offsetHeight获取，但是在以下情况下会远远小于实际高度。

• 内联样式：在DOM节点生成时，样式还未渲染完成，此时获得的高度是默认样式的高度，待样式渲染完成后，高度可能会有变化
• 图片高度：img节点的高度开始是0，在图片加载完成时，才会等于图片高度，因此这里也会存在误差

惯性滚动

我们知道，为了让滚动更加流畅，原生的滚动会有一个惯性滚动的效果，即手指快速滑动松开后，滚动区域会继续滚动一段距离后停止。

为了实现这个功能，我们需求知道手指滑动的速度，根据比率计算目标滚动位置，然后驱动滚动，让其到达目标位置。

这里笔者尝试了两种方案：

1. 通过requestAnimationFrame不断进行偏移，直到到达目标位置
2. 使用transition进行过渡，设置动画曲线让其到达目标位置

笔者对比了两种方案，最终选择了方案2，原因是transition过渡会更加的流畅，而requestAnimationFrame会有略微的卡顿，但是transition过渡，我们实时触发滚动事件时，不好拿到其当前的位置，查阅了一些资料，笔者最终找到了解决方法，即getComputedStyle，这个API可以拿到当前页面渲染的实时样式，也就是说，哪怕它处于过渡动画中，我们可以实时拿到它的真实位置。

边界回弹

当滚动超出边界时，通常我们还可以让其继续滚动，但是这时候会设置阻碍，即滚动速度慢下来，当滚动停止时，我们再将其拽回到边界线。我们可以通过监听transitionend事件来判断惯性滚动停止，这里的技术点不做过多分析，感兴趣可以在文末中的源码找答案。

默认行为

通常情况下，我们需要阻止浏览器的默认行为（如滚动），但是这样也会误杀一些我们需要的默认行为（如超链接跳转、输入框聚焦）。

解决方法很简单，在touchstart触发时，我们判断一下目标节点是否需要阻止默认行为，比如说tagName=INPUT，我们不阻止默认行为。

点击事件

默认行为被阻止，绑定在子节点上的点击事件就无法触发了，因此这里我们需要判断一下是否需要触发点击事件。可以通过touch系列事件模拟点击行为，然后通过document.createEvent('Event')来主动触发click事件。

滚动指示器

在滚动区域中，通常在右侧会有一个指示器，用于查看当前在整个内容区块的大概位置。

为了方便使用，笔者注册了一系列的钩子，方便使用者调用，scroll钩子就是其中之一，在滚动的时候它会实时触发，在这里就派上用场了。我们通过scroll钩子改变指示器的位置，唯独要注意的是滚动超出边界时，指示器会变短然后恢复。

@axe/scroller

基于以上知识点和技术分析，笔者写了一个模拟滚动js库（无任何依赖）：https://github.com/ansenhuang/axe/blob/master/packages/scroller/README.md