0

次の関数を使用して作業を開始する前に、アイテムが表示されていることを確認しようとしています。

isVisible: function (node, doc, x, y) {
    var el = doc.elementFromPoint(x, y);
    if (node === el) return true;
    else return false;
},

xおよびyは選択されたノードの位置であり、によって計算されます。

findPos: function (node) {
    var pos = new Object();
    pos.left = pos.top = 0;
    if (node.offsetParent) {
        do {
            pos.left += node.offsetLeft;
            pos.top += node.offsetTop;

        } while (node = node.offsetParent);
    }
    return pos;
}

すべてが正常に動作します。ただし、ページを下にスクロールすると、isVisible関数は正しい値を返さなくなります。これは、位置が変更されたが、位置検索機能が正しい値を返さないことが原因です。

の逆のような要素の位置を取得する方法はありelementFromPointますか？または誰かが別の方法を持っていますか？

4

3 に答える 3

1

入力パラメータにとwindow.scrollXをwindow.scrollY追加することでこれを修正することができましたdoc.elementFromPoint()xy

    isVisible: function (node, doc, x, y) 
     {
      var el = doc.elementFromPoint(x-window.scrollX, y-window.scrollY);
        if (node === el) return true;
          else return false;
     },

これはうまくいくようです

于 2012-06-25T19:59:02.323 に答える
1

このisVisible()メソッドを使用するelementFromPoint()メソッドを作成しました。IE9+で機能して、要素が表示されているかどうかを検出する必要があります。

var isVisible = function(elem) {
  var w = window, d = document, height, rects, on_top;
  if(!elem || (elem && elem.nodeType !== 1) || !elem.getClientRects || !d.elementFromPoint || !d.querySelector || !elem.contains) {
    return false;
  }
  if (elem.offsetWidth === 0 || elem.offsetHeight === 0) {
    return false;
  }
  height = w.innerHeight ? w.innerHeight: d.documentElement.clientHeight;
  rects = elem.getClientRects();
  on_top = function(r, elem) {
    var x = (r.left + r.right)/2,
      y = (r.top + r.bottom)/2,
      elemFromPoint = d.elementFromPoint(x, y);
      return (elemFromPoint === elem || elem.contains(elemFromPoint));
  };
  for (var i = 0, l = rects.length; i < l; i++) {
    var r = rects[i],
      in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);
    if (in_viewport && on_top(r, elem)) {
      return true;
    }
  }
  return false;
};

あなたはそれをこのように呼ぶでしょう：isVisible(document.getElementById('at-follow'));

また、ここにその要点があります。

于 2013-04-04T22:12:27.393 に答える
0

このライブラリはあなたが探しているものでなければなりません：https ：//github.com/cpatik/within-viewport/blob/master/withinViewport.js

于 2012-06-24T03:51:01.843 に答える