2

要素のオフセットを取得するには、次を使用します。

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

問題は、これら2つの関数をマージする方法がわからないため、ページで実行されたスクロールを含む要素のオフセットを取得できることです。要素の位置を設定するときは、通常、両方の関数を参照する必要がありますが、1つの関数で合計オフセットを取得することは理にかなっているようです。どうすればこれを達成できますか？これをすべて1つの関数で実行するのは良い考えですか、それともスクロールなしでオフセットを取得するのが良い考えである特定のユースケースがありますか？

4

1 に答える 1

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 }
}
于 2012-07-28T14:13:34.213 に答える