Optimize scroll speed for Internet Explorer 11

Question

I currently have an agenda-like application where the first column is absolute horizontal and the first row absolute vertical. I am achieving this by catching the scroll effect and change the left or top property of the CSS class it's attached to. ( these classes can be up to 700 items ( 2 years each day )).

$(window).scroll(function () {
    $('.Planning tr > td:first-child').css("left", "" + $(this).scrollLeft() + "px");
    $('.Planning thead > tr:first-child').css("top", $(this).scrollTop()+50 + "px");                 
});

This works as expected in all browsers (I tested in Chrome, Firefox and Internet Explorer)

But on Internet Explorer, it's very slow. The scroll only shows after you stopped scrolling, whereas in Chrome and Firefox it looks like the top row is fixed, which looks better and more user friendly.

Is there any way to boost this? Or any libraries who are optimized for Internet Explorer so I can avoid this "slow" behaviour in IE?

https://jsfiddle.net/7mfcrLh5/12/ For a jsfiddle example ( this works great in chrome but not in internet explorer )

Answer 1

You could try to throttle the functionality of the scroll function every 100ms or 200ms which is still pretty fast each second.

var planningCol = $('.Planning tr > td:first-child'),
    planningHead = $('.Planning thead > tr:first-child');

$(window).scroll(function(){
    var self = this;

    throttle(function(){
        planningCol.css({ left: $(self).scrollLeft() });
        planningHead.css('top', $(self).scrollTop() + 50 + 'px');
    }(), 200); // call your function directly upon return
});

Or you can use CSS on the body, detecting when a page is scrolled or scrolling. Then apply .scrolling { pointer-events: none !important; } which boosts the UI.

Also try to move the selections out of the scroll function if they are always the same.

var win = $(window),
    body = $(document.body),
    planning = $('.Planning'),
    planningCol = planning.find('tr > td').first(),
    planningHead = planning.find('thead > tr').first();

win.scroll(function(){
    // scrolled
    body.toggleClass('scrolled', !!win.scrollTop());

    // scrolling
    body.addClass('scrolling');
    planningCol.css({ left: win.scrollLeft() });
    planningHead.css({ top: win.scrollTop() });

    setTimeout(function(){
        body.removeClass('scrolling');
    }, 200);
});