ElementFromPoint returns null when used in the onscroll event

Question

I have a simple html page with a leading div with a fixed height (scrollable) and two small divs in this div. I am trying to get the current element at the midpoint of the leading div while scrolling. It works well in all browsers except IE8. In IE8, document.elementFromPoint () returns null in the onscroll event for all possible values ​​as coordinates. Does anyone know a workaround or a solution to this problem?

Here is the HTML code:

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

Answer 1

, , , , - elementFromPoint, , setTimeout (fn, 0), . IE9 ; IE8 - , .