javascript - elementFromPoint 在 onscroll 事件中使用时返回 null

Question

我有一个简单的 html 页面，其中有一个固定高度(可滚动)的主 div 和此 div 中的 2 个小 div。我试图在滚动过程中获取主 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 };
    }

Answer 1

虽然这可能不是最优雅的解决方案，但我最终检查了是否从 elementFromPoint 收到了一些东西，如果没有，则使用 setTimeout(fn, 0) 在下一个空闲时钟周期重试函数调用。在 IE9 等浏览器中，似乎是第一次运行；对于 IE8，它设置超时并在滚动事件处理完成后触发，这会给出一个元素。