Question

我想得到一个表格单元格的位置/偏移量然后使用这个数据我想要追加并将一个新元素放在完全相同的位置。

实现此目的的代码如下：

function addBlock()
{
    // get the cell position
    var cellPosition = $('.item').position(),
        cellPositionTop = cellPosition.top,
        cellPositionLeft = cellPosition.left;

    // append the overlay
    var blockOverlay = $('<div class="blockOverlay"></div>').appendTo('.container').hide();

    // set the overlay width and height to the same as the cell
    blockOverlay.css({
        'background-color':'blue',
        'width': $('.item').outerWidth(),
        'height': $('.item').outerHeight()
    });

    // position the overlay in the same place as the cell
    blockOverlay.css({
        'position': 'absolute',
        'top': cellPositionTop,
        'left': cellPositionLeft
    });

    // show the overlay
    blockOverlay.show();
}

包含单元格的表非常大，位于溢出元素内部，这意味着表格单元格可能在屏幕外。如果运行上面的代码没有滚动，那么它工作正常，但是如果我滚动然后运行它，偏移是不正确的。这是因为即使我使用position()而不是offset()，它在调用函数时获取相对于其父（.container）的单元格位置，而不是它的位置而不管滚动位置。

我该如何解决这个问题？

这是一个显示问题的小提琴：https://jsfiddle.net/25e6qmnh/

尝试在各个滚动位置单击按钮，您将看到蓝色框仅在开始位置时覆盖红色单元格。无论滚动位置如何，它都应始终覆盖红色单元格。

Answer 1

您需要将$('.container').scrollLeft()添加到cellPositionLeft，因此新行将如下所示：

cellPositionLeft = cellPosition.left + $('.container').scrollLeft();

您没有使用滚动宽度计算位置，因此您需要添加它。您还需要对scrollTop()执行相同操作，但这将留给您。

以下是一个工作示例：https://jsfiddle.net/qorpucwq/

Answer 2

您可以初始化元素.item的值一次，然后就可以了。

function addBlock()
{
    // get the cell position
    var
        cellPositionTop = cellPosition.top,
        cellPositionLeft = cellPosition.left;

    // append the overlay
    var blockOverlay = $('<div class="blockOverlay"></div>').appendTo('.container').hide();

    // set the overlay width and height to the same as the cell
    blockOverlay.css({
        'background-color':'blue',
        'width': $('.item').outerWidth(),
        'height': $('.item').outerHeight()
    });

    // position the overlay in the same place as the cell
    blockOverlay.css({
        'position': 'absolute',
        'top': cellPositionTop,
        'left': cellPositionLeft
    });

    // show the overlay
    blockOverlay.show();
}
var cellPosition;
$(document).ready(function(){
    cellPosition = $('.item').position();
    $('.clickme').on('click', function(e){
        e.preventDefault();
        addBlock();
    });

});

这是工作fiddle。

获取表格单元格在溢出元素中的位置

2 个答案: