检查元素在div中是否可见 [英] Check if element is visible in div

问题描述

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

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

需要一些帮助，请提前致谢！

解决方案

这是一个非常好的答案，但是这里是一个视口的修改版本（b）

 （function（$）{
 
 $ .belowthefold = function（lookIn，元素，设置）{
 var fold = $（lookIn）.height（）+ $（lookIn）.scrollTop（）; 
 return $（elements）.filter（function（）{
返回fold< = $（this）.offset（）。top  -  settings.threshold; 
}）; 
}; 
 
 $ .abovethetop = function（lookIn，elements ，设置）{
 var top = $（lookIn）.scrollTop（）; 
 return $（elements）.filter（function（）{
 return top> = $（this）。 offset（）。top + $（this）.height（） -  settings.threshold; 
}）; 
}; 
 
 $ .rightofscreen = function（lookIn，elements，设置）{
 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> 
  

像这样调用它：

<$ p $ （＃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/

I have a div with many li's inside.

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

Typically when the user is scrolling inside the window, some <li>'s get into the overflow and will be hidden. I know I can check if an element is in the viewport of the screen with this jQuery Plugin: http://www.appelsiini.net/projects/viewport I would just need this functionality, but not for the whole screen, but on a single div only. So I could update some text when elements aren't visible.

Need some help, Thanks in advance!

解决方案

This is a very good answer, but here's a modified version of the Viewport plugin you mentioned.

(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);

With HTML like this:

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

Call it like this:

$.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/

这篇关于检查元素在div中是否可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！