H5页面滚动阻尼效果实现

功能描述

• 要求

  • 页面分为AB两个区域

  • 当手机可视区的底部接触到 “阻尼带” 的时候，有个上拉弹性过程

    • 当上拉到一定阈值程度就直接把B区顶部弹到手机可视区的顶部，让可视区从B区开始显示
    • 当上拉程度未到阈值，就回弹复原

  • 当手机可视区从B区向上滚动时候，B区顶部接触带“阻尼带”，有个下拉弹性过程

    • 当下拉到一定阈值程度就直接把A区底部弹到手机可视区的底部，让可视区从A区底部向上开始显示
    • 当下拉程度未到阈值，就回弹复原

• 提示

  • 可用jQuery实现

具体实现过程

首先什么是阻尼效果？上网查阅：

阻尼（英语：damping）是指任何振动系统在振动中，由于外界作用和/或系统本身固有的原因引起的振动幅度逐渐下降的特性，以及此一特性的量化表征。

好吧，生涩难懂，没能理解。不过网上有说此效果在iPhone上比较常见，直接上图比较容易理解：

简单来说，就是界面滑动到了最底部或最顶部仍可以比实际的内容多滑动一段距离然后回弹的弹性效果。 从效果中可以看出，有三个重点：

• 滑动到最顶部或最底部才出现。
• 表现出比实际的内容多滑动一段距离，实际操作知道，多滑动的距离即是手指在屏幕上滑动的距离。
• 放开手之后，有回弹效果。

已经知道什么是阻尼效果了，现在思考如何去实现。 对于第二点，我们可以监听 touchstart, touchmove, touchend 事件，跟鼠标拖拽的原理类似：

1. touchstart 时，记下起点位置；
2. touchmove 实时计算滑动的距离。
3. touchend 时，能得到最终的滑动距离，跟设定的阈值比较。进入到页面自动控制阶段：大于阈值则让页面滑动到下一页，小于阈值则恢复到起始位置。

在我实现的过程中，想过两种方案。

1. 利用Js 大致思路是，通过监测滚轮事件，检测到页面已经滑动到最底部（最顶部同理），计算手指在页面的滑动距离，touchmove事件触发时，给下面的阻尼带增加padding-bottom，造成页面跟着手指多滑动一段距离的假象。 缺点：利用js实现动画比较耗费性能。

2. 利用css 第二个方案采用css动画，页面多滑动一段距离，实际上也可以通过把页面往手指滑动的方向translate一段距离，这个时候页面只要背景色相同，也可以实现相同效果。 因为translate可以出发浏览器硬件加速，可以保证性能。

能用 css 做的，绝对不要用 js 解决。

但是在第二种方案实现过程中发现一个问题，如果我们在滑动一段距离后才到达最底部，这时候不松开手，又往回滑，就会出现bug。

我是通过监测滚动条的位置判断是否到达底部。

$(document).scroll(() => {
    isBottom = document.scrollTop() >= $(document).height() - $(window).height();
});
复制代码

因为往回滑的过程，滚动条也往上滑动，导致isBottom错误，出现bug。

上网查阅了很多资料，没有找到理想的解决办法，但是找到一个移动端插件：Swiper，这是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。这个插件也实现了阻尼效果。 通过看它的源码发现，Swiper也是利用translate的方法，将页面往上移动一段距离，但是滚动条是自己实现的，也就是通过设置外面容器的overflow： hidden来禁用原生滚动条，自己重新实现一个。 道理很简单，我们可以通过touch事件translate页面，同样也可以translate滚动条，这样达到自己可控。

找到解决办法，仿照Swiper的思路（但是省去了滚动条部分的代码实现，就是页面没有滚动条），粗略实现了阻尼效果。

详细代码见我的github。其中利用了webpack进行打包编译。

转载于:https://juejin.im/post/5b24ffe3f265da59934b33f4