包括滚动的元素偏移答案

【问题标题】：Element Offset Including Scroll包括滚动的元素偏移
【发布时间】：2012-07-28 14:01:46
【问题描述】：

要获得我使用的元素偏移量：

function(el) {
    if(el && el.parentNode) {
        var x = 0;
        var y = 0;
        while(el) {
            x += el.offsetLeft;
            y += el.offsetTop;
            el = el.offsetParent;
        }
        return {x: x, y: y};
    }
    return null;
}

为了获得它的滚动偏移量，我使用：

function(el) {
    if(el && el.parentNode) {
        var x = 0;
        var y = 0;
        while(el) {
            if(el && el.parentNode) {
                x += el.scrollLeft;
                y += el.scrollTop;
                el = el.parentNode;
            } else {
                el = null;
            }

        }
        return {x: x, y: y};
    }
    return null;
}

问题是我不知道如何将这两个函数合并在一起，所以我可以获得一个元素偏移量，包括在页面上完成的任何滚动。在设置元素位置时，我通常只需要引用这两个函数，但似乎只在一个函数中获取总偏移量是有意义的。我怎样才能做到这一点？在一个函数中完成这一切是否是个好主意，或者是否有特定的用例在没有滚动的情况下获得偏移量是个好主意？

【问题讨论】：

为什么你会希望 scrollLeft/Top 包含在偏移量中？为什么你会想要累积完全不相关元素的 scrollLeft/Tops？如果 div 滚动到 40，body 滚动到 200，我可以使用数字 240 做什么？
@Esailija 在视图框中找到元素的绝对位置，可能吗？
这个想法是能够获取屏幕上的元素实际位置，如果具有溢出自动的 div 已向下滚动，则实际位置必须包括滚动位置才能获得实际位置屏幕。

标签： javascript dom scroll offset

【解决方案1】：

你的意思是这样的？

function f (el) {
  var offset = (function(el) {
    if(el && el.parentNode) {
      var x = 0;
      var y = 0;

      while(el) {
        x += el.offsetLeft;
        y += el.offsetTop;
        el = el.offsetParent;
      }

      return {x: x, y: y};
    }

    return null;
  })(el);

  var scroll = (function(el) {
    if(el && el.parentNode) {
      var x = 0;
      var y = 0;

      while(el) {
        if(el && el.parentNode) {
          x += el.scrollLeft;
          y += el.scrollTop;
          el = el.parentNode;
        } else {
          el = null;
        }
      }

      return {x: x, y: y};
    }

    return null;
  })(el);

  return { x: offset.x + scroll.x, y: offset.y + scroll.y }
}

【讨论】：

那么没有两次迭代dom就没有办法做到这一点？