优化Internet Explorer 11的滚动速度 [英] Optimize scroll speed for Internet Explorer 11

问题描述

我目前有一个类似议程的应用程序，其中第一列是绝对水平的，第一列是绝对垂直的。我通过捕获滚动效果并更改它附加到的CSS类的left或top属性来实现此目的。 （这些课程最多可以包含700个项目（每天2年））。

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

这在所有浏览器中均可正常使用（我在Chrome，Firefox和Internet Explorer中测试过）

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

但是在Internet Explorer上，它非常慢。
滚动仅在您停止滚动后显示，而在Chrome和Firefox中，看起来顶行是固定的，看起来更好，更友好。

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.

有没有办法提高这个？或者任何针对Internet Explorer优化的库，以便我可以避免IE中的这种慢行为？

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/ 对于jsfiddle示例（这在chrome中效果很好但在Internet Explorer中不行）

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

推荐答案

您可以尝试节流每100ms或200ms滚动功能的功能，每秒仍然很快。

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

或者您可以在正文上使用CSS，检测页面何时滚动或滚动。然后应用 .scrolling {pointer-events：none！important; } 这会提升用户界面。

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

这篇关于优化Internet Explorer 11的滚动速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！