要素の位置計算を改善するにはどうすればよいですか？

Question

私は、クリックした要素に対する親要素に関する情報を出力するために私が使用する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：計算はy ...と似ているはずなので、現時点でxを修正する必要はありません。後で。

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

普遍的な解決策でなければなりません。あなたが現在のビューにフィットするようにする必要があるときに非常に便利です。