javascript - 使用 css translate 3D 平滑滚动

Question

我们正在使用最少的 js 和 css translate 3d 属性构建一个平滑滚动库。我们有这方面的基础（作为附加的笔），但是随着我们增加图像和文本内容的数量，动画开始抖动，有时甚至在我们滚动时跳跃。我们不确定我们是否正在使用最佳方法来实现这一目标。请检查附带的笔。

链接到笔

    $(function () {

    $('.wrapper').height($('.smooth').height());

    var scrollTimer = null;

    $(window).scroll(function () {
        if (scrollTimer) {
            clearTimeout(scrollTimer);
        }
        scrollTimer = setTimeout(requestAnimationFrameTog, 5)
    });

    $(window).resize(function () {
        $('.wrapper').height($('.smooth').height());
    });

});

function requestAnimationFrameTog() {
    scrollTimer = null;
    window.requestAnimationFrame(scrollerize);
}

function scrollerize() {
    var scroll = window.pageYOffset;
    $(".smooth").css({
        transform: 'translate3d(0px, -' + scroll + 'px, 0px)'
    });
}

谢谢 ：）