Smooth scrolling using css translate 3D

We are building a sleek scrolling library using minimal js and css translating 3D properties. We have a framework for this (like a pen attached), however as the number of images and text content increases, the animation starts to jitter and sometimes even jump as we scroll. We are not sure if we are using the best approach to achieve this. Please check the supplied handle.

Handle link

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

      

        
        
        
      

    

Thank:)