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

Question

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

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

问题： 当网格滚动然后隐藏然后在 IE 中重新显示时，滚动位置重置为网格顶部，并且 viewport/data 要么切断或完全隐藏（取决于滚动量）。

这里有一个 fiddle 演示 SlickGrid.js IE 错误（使用作者的 simple example 1）：

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

有人对此有通用的修复或补丁到 slick grid 吗？

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

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

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

（正在查看JS代码，但我还没有确认这个bug是微软的还是SlickGrid的）

Answer 1

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

就是说，如果您希望保留 scrollTop 位置，您可以扩展 SlickGrid 或创建一个包装器 a class 订阅 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

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

SlickGrid.js viewport visibility toggling issues with Internet Explorer

javascript

jquery

internet-explorer

slickgrid