javascript - 检查元素是否在 div 中可见

Question

我有一个里面有很多 li 的 div。

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

通常当用户在窗口内滚动时，一些<li>'s 进入溢出并被隐藏。我知道我可以使用这个 jQuery 插件检查一个元素是否在屏幕的视口中：http: //www.appelsiini.net/projects/viewport 我只需要这个功能，但不是整个屏幕，而是在一个仅单个 div。因此，当元素不可见时，我可以更新一些文本。

需要一些帮助，在此先感谢！

Answer 1

这是一个很好的答案，但这是您提到的 Viewport 插件的修改版本。

(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/