H5页面滚动阻尼效果实现

简介:

功能描述

  • 要求

    • 页面分为AB两个区域

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

      • 当上拉到一定阈值程度就直接把B区顶部弹到手机可视区的顶部,让可视区从B区开始显示
      • 当上拉程度未到阈值,就回弹复原
    • 当手机可视区从B区向上滚动时候,B区顶部接触带“阻尼带”,有个下拉弹性过程

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

    • 可用jQuery实现

具体实现过程

首先什么是阻尼效果?上网查阅:

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

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


a320c7901d46677d460a1a172de504c89c7c923d

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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



原文发布时间为:2018年06月16日
原文作者: BeckyWang
本文来源:  掘金  如需转载请联系原作者



相关文章
|
4月前
|
JavaScript
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
115 1
|
6月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
543 0
|
JavaScript API 容器
IntersectionObserver实现横竖滚动自适应懒加载
ntersectionObserver实现横竖滚动自适应懒加载 这几天使用vitepress编写个人网站的时候,编写了一个存放图片的组件,理所当然的,这个组件应该实现图片懒加载,并且由于这个组件存放的图片可以是非常多的,所以实现懒加载就显得极为重要了,但是由于我实现这个组件的方式有点特别,是用盒子的背景图来存放图片的,并且支持横向滚动,所以大致搜索了下了解到了IntersectionObserver这个api非常适合我用来实现这个功能(缺点就是兼容性可能差点);
139 0
IntersectionObserver实现横竖滚动自适应懒加载
|
开发工具
滑动拼图验证码滑动框样式设置
之前在某官网登录的时候有一个滑动拼图验证码,很好奇怎么去实现。然后就想着自己弄一个。同时我在想有没有办法可以修改滑动拼图的滑动框样式呢?然后让我找到了 KgCaptcha,下面我就简单介绍一下吧!
滑动拼图验证码滑动框样式设置
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
159 0
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
一篇文章帮助你理解跑马灯的滚动原理
一篇文章帮助你理解跑马灯的滚动原理
158 0
一篇文章帮助你理解跑马灯的滚动原理
|
Android开发
RecycleView 不显示、显示不全及滑动卡顿
RecycleView 出现的不显示或显示不全。ScrollView中嵌套RecycleView滑动出现卡顿。
629 0
|
前端开发
CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间
CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间
2212 0