【requestAnimationFrame】用原生js实现页面平滑滚动到目标位置-2018-05-11

由于最近要实现这个功能,没有发现比较完善比较满意的实现思路。所以,自己写了一版。请教了大神一种比较好的思路,写出来分享一下~

实现页面滚动到目标位置,可以向上或向下。

这个功能用jQuery实现比较容易,三五行搞定,但是,有时候,总不能为了实现一个滚动效果去多引入一个库,所以,现在我们抛开jQuery库,用原生JS实现。

实现动画的API:requestAnimationFrame
页面滚动的API:window.scrollTo()

思路步骤:

获取元素。
获取元素到屏幕顶部的距离 top: getBoundingClientRect
获取页面已滚动的距离 pageY: pageYOffset
得到目标位置 endPosition: top+pageY
requestAnimationFrame 是在显示器屏幕刷新一帧时候执行一次传入的run函数。
设定动画持续时间 duration=500ms,
定义run函数,显示器每刷新一帧,则循环调用一次run函数。

每次调用run的时候,获取时间差,根据时间-位置对应的值,根据时间得到此刻应该滚动到的位置,window.scrollTo 到这个位置。
根据时间设定要滚动到的位置。如果到了规定时间,页面应该在目标位置。否则直接滚动到目标位置。

scroll = (ev, target) => {
    ev.preventDefault();

    const scrollPart = document.querySelector('.' + target); // 目标节点class
    const top = scrollPart.getBoundingClientRect().top;
    const pageY = window.pageYOffset;
    const endPosition = top + pageY;

    const startTime = +new Date();
    const duration = 500; //ms

    function run() {
        const time = +new Date() - startTime;

        window.scrollTo(0, pageY + top * (time / duration));
        run.timer = requestAnimationFrame(run);

        if (time >= duration) {
            window.scrollTo(0, endPosition);
            cancelAnimationFrame(run.timer);
        }
    } 

    requestAnimationFrame(run);
}

scroll();

推荐阅读更多精彩内容

  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 278评论 0 3
  • 在线阅读 http://blog.poetries.top/FE-Interview-Questions 关注公众...
    poetries阅读 52,187评论 16 391
  • 使用Java反射,您可以检查类的方法并在运行时调用它们。 这是通过Java类java.lang.reflect.M...
    FantJ阅读 1,095评论 2 1
  • 近两年来,鱼火锅成为了一种饮食潮流,无论是麻辣鱼火锅、清汤鱼火锅、酸菜鱼火锅,都成为北京食客们的最爱,那么为什么鱼...
    你脑袋里有花生阅读 81评论 0 0
  • 今天放学回家后,爸爸教我写作业,改正了我写字的坏习惯,有的字没按米字格的标准写,大小不一不好看。爸爸告诉我要写在中...
    郭宪阅读 24评论 0 0