源生js惯性滚动与回弹效果

在写移动端的APP或者页面时，经常会遇到惯性滚动与回弹效果。用插件iscroll可以轻松解决这个问题，大多数的移动框架也能轻松解决这个问题，它们内部都封装了这个效果。

一直好奇这个效果原生JS是怎么实现的，里面涉及到的弹力公式以及惯性效果还有一大堆临界点的判断，很是考验人。

在网上找了一下，看到有大神的一篇相关的笔记，所以复制过来，仔细研究。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8"/>

    <meta name="Keywords" content=""/>

    <meta name="Description" content=""/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta content="telephone=no" name="format-detection"/>

    <meta content="email=no" name="format-detection"/>

    <title>Document</title>

    <style>

        body {

            margin: 0;

            padding: 0;

        }

        div {

            position: relative;

            width: 200px;

            height: 300px;

            margin: 3em auto;

            border: 1px solid #CCC;

            overflow: hidden;

            -webkit-user-select: none;

            user-select: none;

        }

        ol {

            width: 100%;

        }

        ol > li {

            height: 30px;

        }

    </style>

</head>

<body>

<div>

    <ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ol>

</div>

<script>

    function myScroll(ctx) {

        var ol = ctx.firstElementChild || ctx.firstChild,

                offset = 50,//最大溢出值

                cur = 0,//列表滑动位置

                isDown = false,

                vy = 0,//滑动的力度

                fl = 150,//弹力,值越大,到度或到顶后,可以继续拉的越远

                isInTransition = false;//是否在滚动中

        ctx.addEventListener("mousedown", function (e) {

            if (isInTransition)return;//如果在滚动中，则中止执行

            clearTimeout(this._timer);//清除定时器

            vy = 0;

            this._oy = e.clientY - cur;//计算鼠标按下位置与列表当前位置的差值,列表位置初始值为0

            this._cy = e.clientY;//鼠标按下的位置

            this._oh = this.scrollHeight;//列表的高度

            this._ch = this.clientHeight;//容器的高度

            this._startTime = e.timeStamp;//鼠标按下时的时间戳

            isDown = true;//鼠标是否有按下，主要防止用户是从容器外开始滑动的

        });

        ctx.addEventListener("mousemove", function (e) {

            if (isDown) {//如果鼠标是从容器里开始滑动的

                if (e.timeStamp - this._startTime > 40) {//如果是慢速滑动，就不会产生力度，列表是跟着鼠标移动的

                    this._startTime = e.timeStamp;//慢速滑动不产生力度，所以需要实时更新时间戳

                    cur = e.clientY - this._oy;//列表位置应为 鼠标当前位置减去鼠标按下时与列表位置的差值,如:列表初始位置为0,鼠标在 5的位置按,那么差值为 5,此处假如鼠标从5滑动到了4,向上滑,cur = 4-5 =-1  ,假如鼠标从5滑动到了6,向下滑,cur= 6 - 5 = 1

                    if (cur > 0) {//如果列表位置大于0,既鼠标向下滑动并到顶时

                        cur *= fl / (fl + cur);//列表位置带入弹力模拟,公式只能死记硬背了,公式为:位置 *=弹力/(弹力+位置)

                    }else if (cur < this._ch - this._oh) {//如果列表位置小于 容器高度减列表高度(因为需要负数,所以反过来减),既向上滑动到最底部时。

                        //当列表滑动到最底部时,cur的值其实是等于 容器高度减列表高度的,假设窗口高度为10,列表为30,那此时cur为 10 - 30 = -20,但这里的判断是小于,所以当cur<-20时才会触发,如 -21;

                        cur += this._oh - this._ch;//列表位置加等于 列表高度减容器高度(这是与上面不同,这里是正减,得到了一个正数) ,这里 cur 为负数,加上一个正数,延用上面的假设,此时 cur = -21 + (30-10=20) = -1 ,所以这里算的是溢出数

//                        console.log(cur);

                        cur = cur * fl / (fl - cur) - this._oh + this._ch;//然后给溢出数带入弹力,延用上面的假设,这里为   cur = -1 * 150 /(150 - -1 = 151)~= -0.99 再减去 30  等于 -30.99  再加上容器高度 -30.99+10=-20.99  ,这也是公式,要死记。。

                    }

                    setPos(cur);//移动列表

                }

                vy = e.clientY - this._cy;//记录本次移动后,与前一次鼠标位置的滑动的距离,快速滑动时才有效,慢速滑动时差值为 1 或 0,vy可以理解为滑动的力度

//                console.log(vy);

                this._cy = e.clientY;//更新前一次位置为现在的位置,以备下一次比较

            }

        }, false);

        ctx.addEventListener("mouseleave", mleave, false);

        ctx.addEventListener("mouseup", mleave, false);

        function setPos(y) {//传们列表y轴位置,移动列表

            ol.style.transform = "translateY(" + y + "px) translateZ(0)";

        }

        function ease(target) {

            isInTransition = true;

            ctx._timer = setInterval(function () {//回弹算法为  当前位置 减 目标位置 取2个百分点 递减

                cur -= (cur - target) * 0.2;

                if (Math.abs(cur - target) < 1) {//减到 当前位置 与 目标位置相差小于1 之后直接归位

                    cur = target;

                    clearInterval(ctx._timer);

                    isInTransition = false;

                }

                setPos(cur);

            }, 20);

        }

        function mleave(e) {

            if (isDown) {

                isDown = false;

                console.log(vy);

                var t = this,

                        friction = ((vy >> 31) * 2 + 1) * 0.5,//根据力度套用公式计算出惯性大小,公式要记住

                        oh = this.scrollHeight - this.clientHeight;

                this._timer = setInterval(function () {//

                    vy -= friction;//力度按 惯性的大小递减

                    cur += vy;//转换为额外的滑动距离

                    setPos(cur);//滑动列表

                    if (-cur - oh > offset) {//如果列表底部超出了

                        clearTimeout(t._timer);

                        ease(-oh);//回弹

                        return;

                    }

                    if (cur > offset) {//如果列表顶部超出了

                        clearTimeout(t._timer);

                        ease(0);//回弹

                        return;

                    }

                    if (Math.abs(vy) < 1) {//如果力度减小到小于1了,再做超出回弹

                        clearTimeout(t._timer);

                        if (cur > 0) {

                            ease(0);

                            return;

                        }

                        if (-cur > oh) {

                            ease(-oh);

                            return;

                        }

                    }

                }, 20);

            }

        }

    }

    myScroll(document.querySelector("div"));

</script>

</body>

</html>

源生js惯性滚动与回弹效果的更多相关文章

ios客户端快速滚动和回弹效果的实现
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要给容器加一行css代码即可 -webkit-overflow- ...
js之滚动置顶效果
0.js获取高度 ? 1 2 3 4 5 6 document.all // 只有ie认识 document.body.clientHeight // 文档的高,屏幕 ...
js 上下滚动加停顿效果，js 跑马灯加停顿效果
<div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元的 ...
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
移动端页面弹出框滚动，底部body锁定，不滚动 / 微信网页禁止回弹效果
需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...
-webkit-overflow-scrolling 与滚动回弹效果.
参考来源:https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling https://www.w3cways ...
JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
-webkit-overflow-scrolling : touch 快速滚动回弹效果
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要在元素上加一行css代码即可: -webkit-overflo ...
html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

随机推荐

三、VueJs 填坑日记之项目文件认识
上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行.在这一篇,我们将认识vuejs项目里的各 ...
maven项目打包运行出错问题汇总
maven项目打包时总会出现莫名其妙的错误,现总结一下. 打包方式:在maven项目底下运行cmd,输入mvn clean package,会自动按pom.xml的配置打成包.使用java -jar ...
C#动态获取鼠标坐标
.Net封装好的方法 int Control.MousePosition.X;int Control.MousePosition.Y; 用API方法 using System.Runtime.Inte ...
Python环境变量搭建
1.首先下载相对应的Python版本,安装后在系统环境变量的path路径下加入安装的默认路径: 2.测试:dos命令下输入python.回车,然后测试,exit()退出来,测试完成.
HTML5学习指导路线
HTML5是现在热门的技术,经过8年的艰苦努力,该标准规范终于制定完成,在这里为想要学习HTML5初级程序员详细划分一下学习内容和步骤,让大家清楚的知道HTML5需要学什么?能够快速掌握HTML5开发 ...
异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.
出现这个异常说明了跳转页面的url无对应的值. 原因1: Application启动类的位置不对.要将Application类放在最外侧,即包含所有子包原因:spring-boot会自动加载启动类所 ...
在JQuery中如何获取当前时间？
////发表时间(now) function p(s) { return s < 10 ? '0' + s : s; } var myDate = new Date(); //获取当前年 var ...
Android Studio 升级到3.0 提示 java.lang.NoClassDefFoundError
Android Studio 升级到3.0 提示 java.lang.NoClassDefFoundError 这个问题折腾了2个小时,最后解决了,Stack Overflow 上也有一次类似的问题, ...
[搜索]ElasticSearch Java Api(一) －添加数据创建索引
转载:http://blog.csdn.net/napoay/article/details/51707023 ElasticSearch JAVA API官网文档:https://www.elast ...
Java第一季
1.Java常量的应用语法:final 常量名 = 值: final String LOVE = "IMOOC"; final double PI = 3.14 举一个简单的例子 ...

源生js惯性滚动与回弹效果

源生js惯性滚动与回弹效果的更多相关文章

随机推荐

热门专题