jQuery的：測試是否元素在屏幕上

注意可見：這是不是一個問題有關display:none;。jQuery的：測試是否元素在屏幕上

我在不同的容器中設置不同的元素，它們被設置爲overflow:auto;。我想測試是否有任何給定的元素在瀏覽器中可見。

精密工業：

我認爲（讀「我不關心是否」），也沒有絕對的元素浮在上面
容器可以是絕對
元素可能會部分可見

該函數將被稱爲上window（或任何可滾動）滾動事件，以檢查是否一個元素或消失在視口中重新出現，並且觀察到的元件可以是在一邊可滾動的DIV。

這是太多的工作來推廣這種驗證？

來源

2013-04-10 Yanick Rochon

請問這個jQuery插件，通過任何機會，任何使用你的？ - http://www.appelsiini.net/projects/viewport – lifetimes 2013-04-10 21:39:45

這將返回true，如果一個元素指定容器內可見：

function isVisable(element, container){ 

    var elementTop = $(element).offset().top, 
     elementHeight = $(element).height(), 
     containerTop = $(container).offset().top, 
     containerHeight = $(container).height(); 

    return ((((elementTop - containerTop) + elementHeight) > 0) 
     && ((elementTop - containerTop) < containerHeight)); 
}

http://jsfiddle.net/MPuDW/

來源

2013-04-12 05:55:56

我將不得不測試一下，然後上到父樹，檢查是否有元素有滾動條，如果是，每次執行此檢查直到到達身體......我會盡快嘗試。 – 2013-04-12 06:20:31

有一點需要注意，這隻能在包含的元素內工作。如果所選元素在容器中可見，但容器不可見，則它仍然會返回true。 – 2013-04-12 06:36:05

好奇，如果這工作？ – 2013-04-24 05:33:46

jQuery的：測試是否元素在屏幕上

回答

相關問題