如何確定HTML控件是否正在頁面中顯示？

我想知道如何才能在屏幕上只顯示當前顯示的控件。如何確定HTML控件是否正在頁面中顯示？

例如：

如果我有看不到的頁面下的所有排除了用戶的滾動條，我想打只什麼用戶可以在其屏幕上看到現在選擇選擇。如果我可以選擇他沒有看到的所有東西，這也會很好。

這可能嗎？怎麼樣？

謝謝

來源

2012-03-21 ClayKaboom

對於基於插件的方法，我會建議：[用於jQuery的視口選擇器]（http://www.appelsiini.net/projects/viewport）。 – 2012-03-21 14:54:15

你可以計算出什麼樣的用戶可以看到偏移量（比如，當用戶滾動）：

var top = $(window).scrollTop(); 
var bottom = top + $(window).height();

然後，你可以看到，如果一個元素在此範圍內。

$('*').each(function() { 
    var el = $(this); 
    var offsetTop = el.offset().top; 
    var inView = offsetTop >= top && offsetTop <= bottom; 
    el.addClass(inView ? 'in-view' : 'out-of-view'); 
});

很明顯，這樣做有一些缺點性能明智。根據你想要處理的信息，你只能選擇input或任何可能有用的信息。

來源

2012-03-21 12:40:38 rfunduk

正是我所想的（+1）。通配符選擇器讓我害怕！ – 2012-03-21 12:42:21

你會驚訝通配符選擇器在現代瀏覽器上的實際速度有多快，但是，如果你想對視圖中的'button's或'a's做一些特殊的事情，那麼你顯然可以改進這個:) – rfunduk 2012-03-21 12:44:42

這是一個很好的方法！我處理了文檔的滾動事件，並且只要顯示頁面的其餘部分，就可以使用這些元素進行特定的處理。 – ClayKaboom 2012-03-22 15:58:21

我不知道是否有一個簡單或優雅的解決方案。你可以做的是計算所有元素的offset position和scroll offset以找出哪些元素是可見的或不可見的。如果你有很多要檢查的元素，這可能會變得很昂貴，但如果不能很好地工作，它可能會很好地工作。

來源

2012-03-21 12:40:25

如何確定HTML控件是否正在頁面中顯示？

回答

相關問題