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
本文来源:  掘金  如需转载请联系原作者



相关文章
|
2月前
|
前端开发 JavaScript
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
本文介绍了如何使用原生HTML、CSS和JavaScript创建一个移动端可滚动的顶部菜单栏。文章提供了详细的HTML结构、CSS样式和JavaScript代码,实现了菜单项的横向滚动、边界控制和动态样式变化。同时,还展示了如何通过触摸事件监听来控制菜单项的滚动和激活状态。
57 2
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
|
4月前
|
JavaScript
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
147 1
|
6月前
|
JavaScript 前端开发 容器
随着页面的滚动导航条跟着滚动
随着页面的滚动导航条跟着滚动
|
6月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
575 0
判断滚动条距离顶部为0执行事件jq--滚动到顶部的距离
判断滚动条距离顶部为0执行事件jq--滚动到顶部的距离
|
JavaScript API 容器
IntersectionObserver实现横竖滚动自适应懒加载
ntersectionObserver实现横竖滚动自适应懒加载 这几天使用vitepress编写个人网站的时候,编写了一个存放图片的组件,理所当然的,这个组件应该实现图片懒加载,并且由于这个组件存放的图片可以是非常多的,所以实现懒加载就显得极为重要了,但是由于我实现这个组件的方式有点特别,是用盒子的背景图来存放图片的,并且支持横向滚动,所以大致搜索了下了解到了IntersectionObserver这个api非常适合我用来实现这个功能(缺点就是兼容性可能差点);
142 0
IntersectionObserver实现横竖滚动自适应懒加载
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
一篇文章帮助你理解跑马灯的滚动原理
一篇文章帮助你理解跑马灯的滚动原理
158 0
一篇文章帮助你理解跑马灯的滚动原理