5

We're building a smooth scrolling library using minimal js and css translate 3d properties. We have a foundation for this (as attached pen), however as we increase the number of images and text content, the animation starts to jitter and sometimes even jump as we scroll. We're not sure whether we're using the optimal approach to achieve this. Please check out the attached pen.

Link to pen

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

Thanks :)

Clive Vella
  • 51
  • 1
  • 2
  • i guess it happens, because the images do not have sizes before they aren't loaded and `$('.smooth').height()` returns incorrect value. – Danis Oct 24 '14 at 11:42
  • Hi Danis, Thanks for the reply, however that is not our issue. It is more do with the fact that we see a bit of flicker and choppy-ness as we scroll down. – Clive Vella Oct 24 '14 at 12:11
  • Hi @CliveVella, did you found a solution for this? I've made this pen http://codepen.io/joserobleda/full/vXzgvZ/, which is like yours, and I have the same problem. When I add more content to the scrolling div, it start flickering. – joserobleda Oct 18 '16 at 07:58

0 Answers0