如何提高元素位置的計算？

我有一個div#panel，我用它來打印關於父元素相對於我單擊的元素的信息。這意味着div元素沒有固定的寬度和高度。如何提高元素位置的計算？

我需要計算使用CSS樣式left和top定位的元素div＃面板的位置。我的目標是保持屏幕上的div#panel，它不應該超出當前視圖/屏幕。

我的計算是這樣的：

var ClientW = jQuery(window).width(); 
var ClientH = jQuery(window).height(); 

var w = $('div#panel').width(); 
var h = $('div#panel').height(); 
var offsetY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 
var offsetX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; 
var y, x; 
if (e.clientY > ClientH - h) 
    y = offsetY + ClientH - (e.clientY-ClientH); 
else 
if (e.clientY < 0 + h) 
    y = offsetY + e.clientY + (h-e.clientY); 
else 
    y = e.clientY < ClientH/2 ? offsetY + e.clientY - h/2 : offsetY + (e.clientY+h/2 > ClientH-h ? ClientH-h : e.clientY+h/2) ;  
x = (e.clientX > ClientW - w/2)?offsetX + ClientW-w : offsetX + e.clientX; 

$('#panel').css({ left: x, top: y })

它的工作原理幾乎完美，但臨近客戶端區域的底部，正上方的底部滾動條（20-40px），該元素不適合在屏幕上。當我點擊太接近底部滾動條時，它會在滾動條的下方消失。我如何糾正或改善y位置的計算？ PS：我現在不需要更正x，因爲計算應該與y ...稍後類似。

來源

2016-08-04 user1141649

最後我發現問題出現在第一個狀態，而不是最後一個。

if (e.clientY > ClientH - h) 
    y = offsetY + e.clientY - h; 
else 
    if (e.clientY < 0 + h) 
    y = offsetY + e.clientY + (h-e.clientY); 
    else 
    y = e.clientY < ClientH/2 ? offsetY + e.clientY - h/2 : offsetY + (e.clientY > ClientH-h? ClientH-h : e.clientY+h/2) ;

它應該是通用的解決方案。當您需要適合當前視圖的框時非常有用。

來源

2016-08-04 14:59:35 user1141649

如何提高元素位置的計算？

回答

相關問題