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

这在所有浏览器中都有效（我在Chrome，Firefox和Internet Explorer中测试过）

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

有没有办法提升这个？或者任何针对Internet Explorer进行了优化的库，这样我就可以避免这种情况，并且＃34;慢速＃34; IE中的行为？

https://jsfiddle.net/7mfcrLh5/12/对于一个jsfiddle示例（这在chrome中效果很好但在Internet Explorer中不行）

Answer 1

你可以每隔100毫秒或200毫秒尝试throttle滚动功能的功能，每秒仍然很快。

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，检测网页何时为scrolled或scrolling。然后应用.scrolling { pointer-events: none !important; }来增强用户界面。

如果它们始终相同，也尝试将选择移出滚动功能。

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的滚动速度

1 个答案: