5

高さが固定されたマスター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 };
    }
4

1 に答える 1

3

おそらく最も洗練されたソリューションではありませんが、elementFromPointから何かを受け取ったかどうかを確認し、受け取っていない場合は、setTimeout(fn、0)を使用して次の空きクロックサイクルで関数呼び出しを再試行しました。IE9やその他のブラウザでは、初めて動作するようです。IE8の場合、タイムアウトを設定し、スクロールイベント処理が完了した後に起動します。これにより要素が提供されます。

于 2012-01-10T21:24:09.180 に答える