Question

我有一个脚本可以在滚动时保持大表的行标题和列标题可见。在IE9，谷歌Chrome，Opera 11中一切正常，但在Firefox 6中，它无法正常工作。行标题没问题，但列标题（标题）搞砸了。

这是javascript：

function moveScroll() {
    var scroll_top = $(window).scrollTop();
    var scroll_left = $(window).scrollLeft();
    var anchor_top = $("#main_table").offset().top;
    var anchor_left = $("#main_table").offset().left;
    var anchor_bottom = $("#bottom_anchor").offset().top;

    $("#clone").find("thead").css({
        width: $("#main_table thead").width()+"px",
        position: 'absolute',
        left: - scroll_left  + 'px'
    });

    $("#main_table").find(".first").css({
        position: 'absolute',
        left: scroll_left + anchor_left + 'px'
     });

if (scroll_top >= anchor_top && scroll_top <= anchor_bottom) {
    clone_table = $("#clone");
    if (clone_table.length == 0) {
        clone_table = $("#main_table")
            .clone()
            .attr('id', 'clone')
            .css({
                width: $("#main_table").width()+"px",
                position: 'fixed',
                pointerEvents: 'none',
                left: $("#main_table").offset().left+'px',
                top: 0
            })
            .appendTo($("#table_container"))
            .css({
                visibility: 'hidden'
            })
            .find("thead").css({
                visibility: 'visible'
            });
    }
}
else {
    $("#clone").remove();
}
}

$("#main_table")
    .wrap('<div id="table_container"></div>')
    .after('<div id="bottom_anchor"></div>');
$(window).scroll(moveScroll);

这有什么解决方案吗？感谢。

Answer 1

问题源于给出“克隆”表的<thead>元素“position：absolute”。如果你把它拿出来，它在Chrome和Firefox中运行良好。

$("#clone").find("thead").css({
    width: $("#main_table thead").width()+"px",
    // position: 'absolute',                     <---- This is the problem
    left: - scroll_left  + 'px'
});

Here is your modified fiddle.

为什么Mozilla Firefox不能正确处理jQuery？

1 个答案: