如何制作一般企业网站,蔬菜配送网站建设,石家庄建站优化公司,湖北省建设工程招标网站功能描述 要求 页面分为AB两个区域 当手机可视区的底部接触到 “阻尼带” 的时候#xff0c;有个上拉弹性过程 当上拉到一定阈值程度就直接把B区顶部弹到手机可视区的顶部#xff0c;让可视区从B区开始显示当上拉程度未到阈值#xff0c;就回弹复原 当手机可视区从B区向上…功能描述 要求 页面分为AB两个区域 当手机可视区的底部接触到 “阻尼带” 的时候有个上拉弹性过程 当上拉到一定阈值程度就直接把B区顶部弹到手机可视区的顶部让可视区从B区开始显示当上拉程度未到阈值就回弹复原 当手机可视区从B区向上滚动时候B区顶部接触带“阻尼带”有个下拉弹性过程 当下拉到一定阈值程度就直接把A区底部弹到手机可视区的底部让可视区从A区底部向上开始显示当下拉程度未到阈值就回弹复原 提示 可用jQuery实现
具体实现过程
首先什么是阻尼效果上网查阅 阻尼英语damping是指任何振动系统在振动中由于外界作用和/或系统本身固有的原因引起的振动幅度逐渐下降的特性以及此一特性的量化表征。 好吧生涩难懂没能理解。不过网上有说此效果在iPhone上比较常见直接上图比较容易理解 简单来说就是界面滑动到了最底部或最顶部仍可以比实际的内容多滑动一段距离然后回弹的弹性效果。 从效果中可以看出有三个重点
滑动到最顶部或最底部才出现。表现出比实际的内容多滑动一段距离实际操作知道多滑动的距离即是手指在屏幕上滑动的距离。放开手之后有回弹效果。
已经知道什么是阻尼效果了现在思考如何去实现。 对于第二点我们可以监听 touchstart, touchmove, touchend 事件跟鼠标拖拽的原理类似
touchstart 时记下起点位置touchmove 实时计算滑动的距离。touchend 时能得到最终的滑动距离跟设定的阈值比较。进入到页面自动控制阶段大于阈值则让页面滑动到下一页小于阈值则恢复到起始位置。
在我实现的过程中想过两种方案。 利用Js 大致思路是通过监测滚轮事件检测到页面已经滑动到最底部最顶部同理计算手指在页面的滑动距离touchmove事件触发时给下面的阻尼带增加padding-bottom造成页面跟着手指多滑动一段距离的假象。 缺点利用js实现动画比较耗费性能。 利用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进行打包编译。
