獲取表格單元格在溢出元素內的位置

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。