前言

不知道大家是否知道阻尼效果，这个效果只能在移动端才能实现，因为它的本质是touch事件以及scroll事件的某些行为。
相信大家应该都用过知乎吧，在知乎里两个页面之间就有一个阻尼层。（大家可以打开手机知乎体验一下）

阻尼效果

那么究竟阻尼效果是什么呢？
简单来说，就是界面滑动到了最底部或最顶部仍可以比实际的内容多滑动一段距离然后回弹的弹性效果，并且在页面的其它地方操作时依旧是非常流畅的滚动效果。

实现思路

既然知道了目标效果，那接下不妨想想该如何进行实现。

尝试方案一

一个非常直接的思路是将所有页面进行平铺，并监听阻尼标识在当前视窗的位置，一旦当阻尼满足了距离条件，就立马阻止掉页面的滚动行为并允许touch行为。
那么此时的页面结构就类似于这样：

<div id="box"><div class="page1"></div><div class="damp">阻尼</div><div class="page2"></div><div class="damp">阻尼</div><div class="page3"></div>
</div>

但是，尝试过后我们会发现，理想是美好的，现实却是残酷的。由于移动端滚动条的特殊机制，我们无法控制并立马禁止其默认的滚动行为。我们可以使用box.scrollTop让其强行定住，但是显然它还是会产生很明显的抖动现象。所以此方案得进行优化。

优化思路

那么是不是就真的没有办法处理这个问题的吗？显然肯定不是，比较人家知乎也没见着会抖动啊，再打开知乎去体验一下人家的阻尼效果，细心的我们会发现它的滚动条的长度会变化，并且它之所以不会产生抖动的本质是因为它当前的页面就只有那么高。
滚动只有那么高确实就不会出现阻尼抖动的问题，但是那么它又是如何滑动下一个页面的内容的呢？
那么接下来就是见证奇迹的时候

三层双滑动窗口模型

首先，我先给出这个模型的dom结构：

<style>#window-out {height: 500px;overflow: scroll;}#window-in {overflow: hidden;}
</style>
<div id="window-out"><div id="window-in"><div class="page1"></div><div class="damp">阻尼</div><div class="page2"></div><div class="damp">阻尼</div><div class="page3"></div></div>
</div>

下面我就基于此模型来给大家逐一解决上面的困境：

三层分别代表：外窗口out层，内窗口in层以及平铺的页面层。
out层为可视区域的大小，它能滚动的区域是window-in的大小。
in层为中间层，它能滑动的区域是整个平铺页面的大小。
in层的出现首先避免了滚动条的抖动现象，并且通过改变in层的scrolltop能够滑动看到下一页的内容。

至于知乎页面头部的滑动效果其实也很简单，通过transform改变in层的translateY即可。
这里可以顺便给大家补充一个小细节：
显示下一页的内容只能通过改变scrolltop，改变translateY超出部分会显示其父元素的内容（out层）。

结语

授人以鱼不如授人以渔，这一次我就不给大家展示完整案例的demo代码，因为我觉得这个功能的难点在于设计思路，如今思路已经明了，剩下的无非是照着思路写代码。老规矩，如果大家对于此思路有任何疑问或者确实写不出代码，可以评论区留言或者私聊我，我会积极给予答复。那么，下期再会。

前端页面阻尼效果实现相关推荐

前端页面紫红色_谷歌正在开发一种神秘的新型移动操作系统，称为紫红色
前端页面紫红色 Google seems to be building a replacement for Android called Fuchsia. Yesterday, they reveal ...
flask-WTF和sqlalchemy结合使用并实现前端页面登录（综合使用）
文章目录 1.文件结构: 2.实验效果: 3.主文件mani.py: 4.前端页面文件:index.html 5.显示登录成功的前端:login_success.html: 1.文件结构: 2.实验效 ...
后端工程师入门前端页面重构（二）：心法 I
本文由 KnewHow 发表在 ScalaCool 团队博客. 上一篇博客是我们<后端工程师入门前端页面重构>系列的第一篇,我们介绍了页面布局的口诀: 从左到右,从上到下,化整为零. 那么 ...
java 解析csv_java解析CSV文件(getCsvData 解析CSV文件 zipFiles 打成压缩包 exportObeEventDataExcel 前端页面响应)...
//CSVUtil.class为类名 private static final Logger log = Logger.getLogger(CSVUtil.class); //filepath 可以为 ...
前端处理带t的时间_大厂实践：如何优雅的监控前端页面性能
前言前端页面性能是一个非常核心的用户体验指标.本文介绍岳鹰全景监控平台如何设计一个通用.低侵入性.自动上报的页面性能监控方案.主要采用的是Navigation Timing API以及sendB ...
java 端写的list 前端页面获取方法
第一种方法: java: 前端页面  <%@ taglib uri="/struts-tags" prefix="s&quo ...
flask从服务器获取html页面,flask的ajax、获取服务器数据、放到前端页面、如果数据存在显示标签、如果不存在不显示标签...
-------------------------------------第一部分----------------------------------------------------------- ...
active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...
点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...
php上传图片到非项目目录，前端页面的读取问题
一.前言关于上传文件部分的危险,一直以来都有听说,但是之前为了方便,一直都是直接放到项目根目录,方便访问.只是现在项目越来越大,安全问题虽然不用刻意追求,但这些基本的地方还是要注意一下的.上传的路径 ...

前端页面阻尼效果实现

文章目录

前言