檢查使用元素的知名度elementFromPoint（）方法

Question

我試圖檢查，以確保項目可見之前，我開始使用下面的函數

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的相反位置？還是有人有另一種方法？

Answer 1

我能夠加入window.scrollX和window.scrollY到doc.elementFromPoint()輸入來解決這個參數x和y

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

這似乎工作細

Answer 2

這個庫應該是你在找什麼：https://github.com/cpatik/within-viewport/blob/master/withinViewport.js

Answer 3

我剛剛寫了一個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'));

而且，這裏是它的gist。