元素偏移包括滚动

时间:2012-07-28 14:01:47

标签: javascript dom scroll 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;
}

并获取其使用的滚动偏移量:

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

问题是我无法弄清楚如何将这两个函数合并在一起,所以我可以得到一个元素偏移量,包括在页面上完成的任何滚动。设置元素位置时,我通常只需要引用这两个函数,但似乎只在一个函数中得到总偏移量是有意义的。我怎样才能做到这一点?在一个函数中执行此操作是一个好主意,还是在没有滚动条的情况下获取偏移量是个好主意时是否存在特定用例?

1 个答案:

答案 0 :(得分:0)

你的意思是这样的吗?

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