Question

我的单页网站有一个平滑的vanilla js滚动，我尝试在没有jquery的情况下实现，我想添加一个像cub bezier这样的计时函数。有没有办法在javascript中这样做？这是代码：

{
    'use strict';

    let currentY = 0;
    let destination = 0;
    let speed = 40;
    let scroller = null;


    function smoothScroll(id) {

        destination = document.getElementById(id).offsetTop;

        //if the user scrolls down
        if (window.pageYOffset < destination) {

            scroller = setTimeout(function () {
                smoothScroll(id);
            }, 1);

            currentY = currentY + speed;

            if (currentY >= destination) {
                clearTimeout(scroller);
            }

            //if the user scrolls up
        } else {

            scroller = setTimeout(function () {
                smoothScroll(id);
            }, 1);

            currentY = currentY - speed;

            if (currentY <= destination) {
                clearTimeout(scroller);
            }

        }

        window.scroll(0, currentY);

    }

    window.onscroll = function () {
        currentY = this.pageYOffset;
    };


    Array.from(document.querySelectorAll(".scroll")).forEach(e => {

        e.addEventListener('click', () => {

            smoothScroll(e.href.split('#')[1]);

        });
    });

}

这是一个可以观察它的代码：https://codepen.io/anon/pen/NYNQym

提前致谢。

Answer 1

首先，您应该使用requestAnimationFrame(fn)代替setTimeout(fn,1)。

你的动画系统是渐进式的 - 它说“我在那里吗？”如果不是，靠近;如果是，请停止。＆＃39;这没关系，但它给你的关于动画的唯一信息是它是否已经完成。

当它接近结束时，它会变得类似“慢慢下来”，但是你不知道什么时候接近结束。

假设我们想要从滚动位置100移动到滚动位置200，从时间0开始到结束时间500.它是映射的时间位置。如果时间是250，我们应该在150位 - 他们都在中途。同样的事情适用于任何其他时间。这称为补间，它是最常用的动画制作方式。

一旦我们以这种方式工作，我们就可以放松一下。缓动函数本身非常简单 - here are all the classic ones。

如果你愿意，我可以发布代码，但听起来你自己想要解决这个问题，希望这是有帮助的，祝你好运。

vanilla js中的定时功能平滑滚动

1 个答案: