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进行打包编译。