javascript - 如何改进元素位置的计算？

Question

我有一个 div#panel，我用它来打印相对于我单击的元素的父元素的信息。这意味着div元素没有固定的宽度和高度。

我需要计算元素 div#panel 的位置，该元素使用 CSS 样式 left 和 top 定位。我的目标是将 div#panel 保留在屏幕上，它不应该超出当前 View /屏幕。

我的计算如下:

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类似。

Answer 1

最后我发现问题出在第一个条件，而不是最后一个。

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 ) ;    

它应该是通用的解决方案。当您需要使框适合当前 View 时非常有用。