Search code examples
jqueryscrollmargininternet-explorer-11fixed

Set margins on scroll event with JQuery - choppy/jumpy/shaking movement


I have tables, that i scroll on X and Y Axis (with JQuery). But while the tables scroll, they are like shaking.

... So my Question is: Why is this shaking happens, how can i prevent that shaking?

var leftOffset = parseInt($(".tablecontainer").css('margin-left')); 
    hhOffset = parseInt($(".headsholder").css('margin-left'));
    fixOffset = parseInt($(".fixedphead").css('margin-left'));
    eisastanaYOffset = parseInt($(".eisastana").css('margin-left'));

    $(".contentbox").scroll(function(){
        $(".tablecontainer").css({
            'margin-left': $(this).scrollLeft() + leftOffset 
        });
        $(".tableheads").css({
            'margin-left': -$(this).scrollLeft()  
        });
        $(".headsholder").css({
            'margin-left': hhOffset - $(this).scrollTop()
        });
        $(".fixedphead").css({
            'margin-left': fixOffset -$(this).scrollTop()
        });
        $(".eisastana").css({
            'margin-left': eisastanaYOffset -$(this).scrollTop()
        });
    });

Solution

  • I used .stop() - Jquery.stop().animate(); - and the shaking stopped.