使用CSS平移3D平滑滚动

Cli*_*lla 5 html javascript jquery css3 translate3d

我们正在使用最少的js和CSS转换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)'
    });
}
Run Code Online (Sandbox Code Playgroud)

谢谢 :)