2011-11-22 7 views
5

固定幅(スクロール可能)のマスターdivとこのdivの2つの小さなdivを持つ簡単なhtmlページがあります。スクロール中にマスターdivの中点に現在の要素を取得しようとしています。 IE8以外のすべてのブラウザでうまく動作します。 IE8では、document.elementFromPoint()は、可能なすべての値を座標としてonscrollイベントでnullを返します。誰でもこの問題の回避策または解決策を知っていますか?onscrollイベントで使用された場合、elementFromPointがnullを返します

ここ

はHTMLコードです:

<div id="mainDiv" style="height:300px;min-height:300px;overflow:auto;" onscroll="mouseScrolled();"> 
     <div id="div1" style="height:500px;min-height:500px;background-color:blue;display:block;"> 

    </div> 
     <div id="div2" style="height:500px;min-height:500px;background-color:red;display:block;"> 

     </div> 
    </div> 

    <span id="debugSpan"> 
    </span> 

のjavascript:

function mouseScrolled(event) { 

     var mainDiv = document.getElementById('mainDiv'); 
     var x = getXY(mainDiv)[0] + mainDiv.offsetWidth/2; 
     var y = getXY(mainDiv)[1] + mainDiv.offsetHeight/2; 
     var ctr = document.elementFromPoint(x , y); 

     document.getElementById('debugSpan').innerHTML = "ClientX=" + x + "<BR>" + "ClientY=" + y +"<BR> Control:" + ctrId; 

    } 

    function getXY(obj) { 
     var curleft = curtop = 0; 
     if (obj.offsetParent) { 
      do { 
       curleft += obj.offsetLeft 
       curtop += obj.offsetTop 
      } 
      while (obj = obj.offsetParent) 
     } 
     return { x: curleft, y: curtop }; 
    } 

答えて

3

私はのelementFromPointから何かを受信した場合はされていない場合の解決策のおそらく最もエレガントではない、私は確認してしまったが、使用setTimeout(fn、0)を呼び出して、次の空きクロック・サイクルで関数呼び出しを再試行します。 IE9などのブラウザでは、初めて動作するようです。 IE8の場合は、スクロールイベントの処理が完了した後にタイムアウトと発生を設定し、要素を与えます。

+0

それは魔法のようなものです。私はすでにそれを計算するために別の方法を使用することに決めましたが、この方法でははるかに便利です。ありがとうございました。 –

関連する問題