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代码，但我还没有确认这个bug是微软还是SlickGrid）

Answer 1

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

也就是说，如果你想保留scrollTop位置，你可以扩展SlickGrid或创建一个包装器，一个订阅onScroll事件的类，记录scrollTop值，并在显示或隐藏时在viewport元素上设置它网格。我在这里修改了您的示例代码作为概念证明：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的问题

1 个答案: