如何计算滚动 div 中的元素位置？答案

【问题标题】：How do I calculate an elements position in a scrolled div?如何计算滚动 div 中的元素位置？
【发布时间】：2024-01-23 01:15:01
【问题描述】：

我有一个绝对定位设置为允许垂直滚动的 div。我的应用包含拖放功能，这些功能依赖于我在触发事件时确定元素的坐标。

我用来计算元素位置的偏移量（即 element.offsetLeft 和 element.offsetTop）仅与元素的原始位置有关，不考虑用户滚动导致的位置变化。我想如果我可以计算滚动的距离，我可以添加一个更正，但我看不到任何方法来做到这一点（与窗口滚动不同）。

非常感谢任何建议。

【问题讨论】：

准确确定一个元素是否在屏幕上是一个难题。您必须支持多种浏览器还是只支持一种？
我忘了说，我需要一个适用于 ie6 的解决方案（SOE - 不是我的选择...）。

标签： css html scroll position

【解决方案1】：

查看 div 容器的 scrollTop 和 scrollLeft 属性。

【讨论】：

@PeterJ：如果这对你有用，你应该投票并接受他的回答。

【解决方案2】：

这是一个跨浏览器的解决方案，它根据滚动 div/s 和窗口滚动来查找元素的位置：

var isIE = navigator.appName.indexOf('Microsoft Internet Explorer') != -1;

function findElementPosition(_el){
    var curleft = 0;
    var curtop = 0;
    var curtopscroll = 0;
    var curleftscroll = 0;

    if (_el.offsetParent){
        curleft = _el.offsetLeft;
        curtop = _el.offsetTop;

        /* get element scroll position */
        var elScroll = _el;
        while (elScroll = elScroll.parentNode) {
            curtopscroll = elScroll.scrollTop ? elScroll.scrollTop : 0;
            curleftscroll = elScroll.scrollLeft ? elScroll.scrollLeft : 0;

            curleft -= curleftscroll;
            curtop -= curtopscroll;
        }

        /* get element offset postion */
        while (_el = _el.offsetParent) {
            curleft += _el.offsetLeft;
            curtop += _el.offsetTop;
        }
    }

    /* get window scroll position */
    var offsetX = isIE ? document.body.scrollLeft : window.pageXOffset;
    var offsetY = isIE ? document.body.scrollTop : window.pageYOffset;

    return [curtop + offsetY,curleft + offsetX];
}

【讨论】：

【解决方案3】：

这是我正在实施的更正，以防有人感兴趣。

谢谢各位。

/*
    Find a html element's position.
    Adapted from Peter-Paul Koch of QuirksMode at   http://www.quirksmode.org/js/findpos.html
*/
function findPos(obj)
{
    var curleft = 0;
    var curtop = 0;
    var curxscroll = 0;
    var curyscroll =0;

    while(obj && obj.offsetParent)
    {
        curyscroll = obj.offsetParent.scrollTop || 0;
        curxscroll = obj.offsetParent.scrollLeft || 0;
        curleft += obj.offsetLeft - curxscroll;
        curtop += obj.offsetTop - curyscroll;
        obj = obj.offsetParent;
    }

    return [curleft,curtop];
}

【讨论】：