高さが固定されたマスターdiv(スクロール可能)とこのdivに2つの小さなdivがある単純なhtmlページがあります。スクロール中にマスターdivの中間点にある現在の要素を取得しようとしています。IE8を除くすべてのブラウザで正常に動作します。IE8では、document.elementFromPoint()は、座標として可能なすべての値のonscrollイベントで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 };
}