【前端 | 教程】纯干货！三步实现滑动阻尼效果

课代表来啦[墨镜] 实现滑动阻尼一共需要三步，巧不巧，和把大象关进冰箱的步数一样👌🏻 第一步，添加缓动，为所有内容嵌套一层容器，并设置transition缓动 第二步，固定窗口，给滑动容器外面再嵌套一层容器，设置fixed定位，固定在窗口顶端，并设置宽高与浏览器窗口一致，注意这里设置完之后，内部内容超出容器的部分已经不可见了，但是最好还是设置一个overflow hidden，防止意外bug 第三步，还原高度，将滑动内容的高度赋给body(不一定是body，依情况而定，可能是最外层某个div元素)，重新出现滚动条，监听滚动事件，将滚动距离设置为滑动内容反向移动的值👌🏻 总结完毕@JIEJOE_轻敲代码 打钱，快点的！[抓狂][抓狂][抓狂]

♥ 33 ↩ 2

这个滑动阻尼效果，不需要设定边界(最大最小滚动距离)，可以适应各种窗口大小，并且可以随时响应窗口变化，电脑端移动端通用，兼容滚动、滑轮事件，up所有网页的滑动阻尼效果一直用的这个方法，基本上到现在都没有什么问题👌🏻，搭配滑动触发，滑动跟随效果不要太爽[脱单doge] 唯一美中不足的小问题是，网页截图的时候，没法截到网页的所有内容[委屈]

♥ 26

这种设计滚动的方式，同大数据虚拟产生滚动原理相似。先根据数据条数和行高度计算出body高度，滚动条距离顶部位置，计算出当前需要展示的那几十条数据进行展示，dom始终只有展示窗口那部分，就没有十万条展示的性能问题了。

♥ 4

这次视频变声的时候老是出问题，变声后的声音一直有噪音，希望大家理解一下，骚瑞[笑哭][笑哭]

♥ 3

老师老师，我跟着您的视频学习下来，现在遇到一个问题，跟您咨询一下。 当我把代码输入后，遇到页面无滚动条，无法向下活动…请问是什么原因导致的

♥ 2 ↩ 2

不错不错，虽然平时用不太到，不过确实学到了

♥ 2 ↩ 1

ScrollY是哪里来的 没看到定义

♥ 2 ↩ 1

虽然，但是这个应该叫滚定事件吧，滑动是另一种事件。[星星眼]

♥ 2 ↩ 1

希望可以出一个你网站那个“who ai i”书写特效[呲牙]是不是用的AE+Lottie实现的？做视频的时候可以用Apple同款“HELLO”来演示[脸红]

♥ 2 ↩ 1

时至今日，已经可以用animation-timeline纯CSS实现了

♥ 1 ↩ 1

谢谢分享，但是up主的英文发音不看字幕真的不知道在讲什么…

♥ 1 ↩ 2

下载了源码实际滚动了几下后 感觉实现的效果很差距 还不如原来的滚动的感觉 有待优化

♥ 1 ↩ 1

能不能出一个，导航栏文字，根据滑动到不同网页内容上自动反色的教程，国内没什么网站用这种效果，教程也找不到，但国外经常看到网站使用这种导航

♥ 1 ↩ 1

牛牛牛，正是需要的。。。[给心心][给心心][给心心]

♥ 1 ↩ 1

视频是用纯ae做的吗 做的好好[打call][脱单doge]

♥ 1 ↩ 2

upup关注你了，可以跟着你学习干货吗？[微笑]

♥ 1 ↩ 1

学习了

♥ 1 ↩ 1

一、如何实现滑动阻力效果，包括对浏览器窗口添加缓冲效果和为整个内容添加缓冲，使交互体验得到提升。 00:01 - 介绍滑动阻力效果的必要性 00:42 - 浏览器窗口滑动原理及如何实现滑动阻尼效果 02:15 - 添加容器和缓冲效果，实现滑动阻力效果 二、如何通过设置窗口大小和监听滚轮事件来固定网页内容，避免出现滚动条，并通过角色还原高度来解决窗口高度压缩的问题。 03:01 - 第一步是固定窗口，不让网页内容超过浏览器窗口大小 03:46 - 添加容器限制网页内容大小，避免滚动条出现 05:41 - 获取容器高度并赋给body，使其重新获得高度，避免窗口大小限制 三、如何使用socket boss实现滚动条和滑动阻力效果，包括获取socket boss的高度、设置滚动值和移动socket boss等步骤。 06:00 - 添加缓动后，滚动条会重新出现，监听滚动世界。 06:12 - 设置延迟方便叶落后查看，web box固定，Soo boss向上移动。 06:24 - 通过函数系的resize body设置，更新Soo boss的高度。 --本内容由AI视频小助理生成，关注解锁AI助理，由@跌跌撞撞致成长LLDS 召唤发送

♥ 1

卧槽卧槽 昨天还在找[笑哭]

♥ 1 ↩ 1