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)'
    });
}

ありがとう ：）