SlickGrid.js 视口可见性切换 Internet Explorer 的问题

Question

我正在使用SlickGrid.js 库，它非常棒！

目前唯一的主要问题是 Internet Explorer（在 9、10 和 11 中得到确认），但 Chrome 和 FF 等符合标准的浏览器工作正常。

问题：当网格被滚动然后隐藏然后在 IE 中重新显示时，滚动位置被重置到网格顶部，并且视口/数据被切断或完全隐藏（取决于滚动量）。

这是一个演示 SlickGrid.js IE 错误的小提琴（使用作者的simple example 1）：

http://jsfiddle.net/crwxoc17/1/

有人对此有一个通用的修复程序或修补光滑网格吗？

我可以打电话给grid.resizeCanvas() 来解决这个问题，但是它会将滚动条重置到顶部，而且为了处理 Internet Explorer 对每个网格都执行此操作非常烦人。

半工作修复，但仍然搞砸scrolltop：

function onShowGrid1() { grid.resizeCanvas(); }

（现在正在查看 JS 代码，但我尚未确认该错误是 Microsoft 的还是 SlickGrid 的）

Answer 1

此问题适用于 IE 中溢出设置为滚动或自动且可见性已切换的任何元素。这里有一个简单的例子：https://jsfiddle.net/qkhxL6r8/4/

也就是说，如果您希望保留 scrollTop 位置，您可以扩展 SlickGrid 或创建一个包装器，该类订阅 onScroll 事件，记录 scrollTop 值，并在显示或隐藏时将其设置在视口元素上网格。我在这里修改了您的示例代码作为概念证明：http://jsfiddle.net/h9cu2cmp/4/

var lastScrollTop;
var scrollTimeout;

function updateScrollTop(e, args){

    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function(){
        lastScrollTop = args.scrollTop;
    }, 30);
}

//...

grid.onScroll.subscribe(updateScrollTop);

$('body').on('click', '.toggle-button', function(){
    $("#myGrid").toggle();
    if(lastScrollTop !== undefined){
        $("#myGrid").find('.slick-viewport').get(0).scrollTop = lastScrollTop;
    }
});

如果您使用远程数据提供程序，您可以使用 grid.onViewportChanged.notify() 为更新后的 scrollTop 触发 ensureData