Grow your CSS skills. Land your dream job.

jQuery animation flickers during scroll (Please Help)

  • # December 27, 2012 at 12:51 am

    Hello Everyone,

    There seems to be a few glitches with some jquery I’m working with. I’ve attempted a fix…having no luck. Hopefully the experts here can provide some assistance. Thank you.

    **Problem**
    The animation flickers/stutters when scrolling the page too fast or at a continuous rate.

    **Attempted Fix**
    Added .stop() to prevent animation queue buildup _Failed to solve the issue_

    **Goal**
    Prevent the flicker/stutter during excessive scrolling

    **Sample**

    http://jsfiddle.net/Sg8JQ/147/embedded/result/

    # December 28, 2012 at 11:49 pm

    Anyone with a hint for solving this?

    # December 29, 2012 at 7:23 pm

    I didn’t experience a flicker with your example. Perhaps you need to throttle your scrolling event so that it doesn’t fire too often. Take a look at this to learn more about throttling:

    http://benalman.com/projects/jquery-throttle-debounce-plugin/

    # December 29, 2012 at 7:59 pm

    Add this:

    return false;

    to the last line of _scrollThis()_. When you use mousewheel, you need to return false if you don’t want the user’s action to actually move the scrollbar. What’s happening in your code, is when the user scrolls the mouse wheel, the scrollbar is moving _and_ your javascript is firing. You just want your javascript to fire and ignore the native behavior.

    # December 30, 2012 at 7:25 am

    Thanks for the replies.

    @DustinWoods

    Is this the correct method for return false?


    var lastAnimation = 0;
    var animationTime = 600; // in ms
    var quietPeriod = 0; // in ms, time after animation to ignore mousescroll

    function scrollThis(event, delta, deltaX, deltaY) {
    var timeNow = new Date().getTime();

    // change this to deltaX/deltaY depending on which
    // scrolling dir you want to capture
    deltaOfInterest = deltaY;

    if (deltaOfInterest == 0) {
    // Uncomment if you want to use deltaX
    // event.preventDefault();
    return;
    }

    // Cancel scroll if currently animating or within quiet period
    if(timeNow - lastAnimation < quietPeriod + animationTime) {
    event.preventDefault();
    return;
    }

    if (deltaOfInterest < 0) {
    if ($('.active').next('div').length) {
    lastAnimation = timeNow;
    $('.active').removeClass('active').next('div').addClass('active');
    $('html,body').stop().animate( {
    scrollTop: $('.active').offset().top -=20 }, animationTime);
    }
    } else {
    if ($('.active').prev('div').length) {
    lastAnimation = timeNow;
    $('.active').removeClass('active').prev('div').addClass('active');
    $('html,body').stop().animate( {
    scrollTop: $('.active').offset().top -=20 }, animationTime);
    }
    }

    return false;
    }

    $(document).mousewheel(scrollThis);​

    # December 30, 2012 at 8:02 am

    Are you just having words scroll across the screen?
    If so, I’ll post what I use when I get home.

    # December 30, 2012 at 11:24 am

    @NSR, Yep! You got it! That should work.

    # December 30, 2012 at 12:46 pm

    @dustinwoods

    Hey…thanks!

    If you have a chance would you mind looking at a similar thread I started?

    http://css-tricks.com/forums/discussion/21422/multiple-keydown-events-fire-while-holding-down-key-too-long-please-help#Item_4

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".