Internet Explorer 11のスクロール速度を最適化する

Question

私は現在、最初の列が絶対水平で、最初の行が絶対垂直のアジェンダのようなアプリケーションを持っています。スクロールエフェクトをキャッチし、CSSクラスの左または上のプロパティを変更することでこれを実現しています。 （これらの授業は最大700項目（毎日2年）とすることができます）。

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

すべてのブラウザで期待どおりにこれは

（私はクロム、FirefoxとInternet Explorerでテストした）動作しますが、Internet Explorerの上で、それは非常に遅いです。 スクロールは、スクロールを停止した後にのみ表示されます。一方、ChromeとFirefoxでは、一番上の行が修正されているように見えます。

これを強化する方法はありますか？またはInternet Explorer用に最適化されているライブラリで、IEでこの「遅い」動作を回避できますか？ jsfiddle例えば

https://jsfiddle.net/7mfcrLh5/12/（これはInternet ExplorerでChromeの素晴らしい作品ではなく）

Answer 1

あなたはスクロール機能の機能にthrottleにまだかなり速い毎秒である100ミリ秒ごとまたは200msのを試みることができます。

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 
}); 

それとも、ページがscrolledまたはscrollingあるときに検出し、体にCSSを使用することができます。その後、.scrolling { pointer-events: none !important; }を適用してUIを向上させます。

また、常に同じ場合、スクロール機能から選択範囲を移動しようとします。

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); 
});