檢測重排或移動HTML元素？

我構建了一個UI小部件，在實際小部件下方顯示一個浮動彈出窗口。它使用絕對定位將它自己放置在小部件下面。我擔心的是當文檔佈局發生變化時，絕對定位的元素不在我的UI小部件下面。檢測重排或移動HTML元素？

有沒有辦法檢測HTML元素是否已移動或重排？

2010-11-17 Tower

我找到可接受的解決方案。

每當顯示浮動彈出窗口時，我會創建一個間隔，每隔250毫秒再次計算其位置（如果父級的位置已更改）。彈出隱藏或關閉時，我結束計時器。

2010-12-11 11:22:48 Tower

在Firefox中，您可能想嘗試[MozAfterPaint]（https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint）以獲得更好的性能 – user123444555621 2010-12-11 16:25:03

這是我們最初獲得的直觀解決方案。我有和你一樣的問題，但不想做這個解決方案，因爲它不是很好的性能。 – 2014-12-17 11:52:35

如何使用相對定位並將您的小部件附加到實際的小部件？這樣，它將始終保持與原始小部件相同的位置。

來源

2010-11-17 17:49:40 casablanca

我也想到了這一點，但我需要彈出窗口來保持頁面上每個其他元素的頂部......並且z-index不能用於相對定位。 – Tower 2010-11-17 18:02:58

您可以將元素附加到body標籤，並根據鼠標的位置將其放置在頁面上。這就是jQuery UI對話框和工具提示類型腳本如何解決z-index問題。

這樣的事情，如果你有jQuery的：

$('#clickelement').click(function(e){ 
    $('#yourlayer').appendTo('body').css({left: e.pageX + 'px',top: (e.pageY + 12) + 'px',zIndex:'10001'}).show(); 
}); 

#yourlayer{ 
    display:none; 
    position:absolute; 
    width:300px; 
}

編輯：固定輕微錯字

來源

2010-11-17 19:02:02 ErikPhipps

我剛剛意識到這不會幫助，如果你的意思是迴流，因爲實時調整大小/迴流。也許你可以得到你的容器元素的底部位置，並用它來定位你的圖層。我從來沒有嘗試過，所以不確定它是否可行。 – ErikPhipps 2010-11-17 19:30:23

檢測重排或移動HTML元素？

回答

相關問題