javascript - Check if element is visible in div - Stack Overflow

admin管理员组

文章数量:1401964

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: 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!

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

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 21, 2013 at 2:12 Þaw 2,05744 gold badges2222 silver badges4040 bronze badges asked Jun 21, 2013 at 0:32 KimmaxKimmax 1,6972222 silver badges3434 bronze badges 3

• this code there checks if the element is visble on screen, not on div. My element cannot be seen when you scroll inside the div. Maybe it is posibile to edit that given code to work for me? – Kimmax Commented Jun 21, 2013 at 0:42
• @Kimmax when do you want to check whether they are visible? – Explosion Pills Commented Jun 21, 2013 at 0:50
• I have a little info box on the right. So when the user scrolls down to the next item, I want to update this info box. So it would be fine to get an 'event' triggered when 3/4 of the element are still shown, but triggering an event at the end of the element would do the job too – Kimmax Commented Jun 21, 2013 at 0:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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/daCrosby/vhF7x/1/

本文标签： javascriptCheck if element is visible in divStack Overflow