檢查元素是否可見div

我有一個div，裏面有很多li。檢查元素是否可見div

<div> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
... 
</div>

通常，當用戶在窗口中滾動，一些<li>的進入和溢出會被隱藏。我知道我可以用這個jQuery插件檢查一個元素是否在屏幕的視口中：http://www.appelsiini.net/projects/viewport 我只需要這個功能，但不是整個屏幕，而是隻在一個div上。所以我可以在元素不可見時更新一些文本。

需要一些幫助，提前致謝！

來源

2013-06-21 Kimmax

此代碼中有檢查，如果該元素在屏幕上visble，而不是DIV 。當您在div內滾動時，我的元素無法看到。編輯給定的代碼爲我工作也許是posibile？ – Kimmax

@Kimmax *當你想檢查它們是否可見時？ –

我在右邊有一個小信息框。所以當用戶滾動到下一個項目時，我想更新此信息框。因此，當仍然顯示3/4元素時觸發'事件'會很好，但在元素末尾觸發事件也會完成這項工作 – Kimmax

This是一個非常好的答案，但這是您提到的視口插件的修改版本。

(function($) { 

$.belowthefold = function(lookIn, elements, settings) { 
    var fold = $(lookIn).height() + $(lookIn).scrollTop(); 
    return $(elements).filter(function(){ 
     return fold <= $(this).offset().top - settings.threshold; 
    }); 
}; 

$.abovethetop = function(lookIn, elements, settings) { 
    var top = $(lookIn).scrollTop(); 
    return $(elements).filter(function(){ 
     return top >= $(this).offset().top + $(this).height() - settings.threshold; 
    }); 
}; 

$.rightofscreen = function(lookIn, elements, settings) { 
    var fold = $(lookIn).width() + $(lookIn).scrollLeft(); 
    return $(elements).filter(function(){ 
     return fold <= $(this).offset().left - settings.threshold; 
    }); 
}; 

$.leftofscreen = function(lookIn, elements, settings) { 
    var left = $(lookIn).scrollLeft(); 
    return $(elements).filter(function(){ 
     return left >= $(this).offset().left + $(this).width() - settings.threshold; 
    }); 
}; 

})(jQuery);

隨着HTML這樣的：

<div id="lookInMe"> 
    <div class="peek"></div> 
    <div class="peek"></div> 
    [ ... ] 
</div>

這樣稱呼它：

$.belowthefold("#lookInMe", ".peek", {threshold : 0}).text("Below"); 
$.abovethetop("#lookInMe", ".peek", {threshold : 0}).text("Above"); 
$.leftofscreen("#lookInMe", ".peek", {threshold : 0}).text("Left"); 
$.rightofscreen("#lookInMe", ".peek", {threshold : 0}).text("Right");

http://jsfiddle.net/daCrosby/vhF7x/1/

來源

2013-06-21 03:38:07 DACrosby

謝謝！這正是我需要的！ – Kimmax

檢查元素是否可見div

回答

相關問題