Search code examples
javascriptjqueryviewport

How to check if an element is in the view of the user with jquery

I have a very big draggable div in my window. This div has a smaller window.

<div id="draggable-area" style="width:500px;height:500px;overflow:hidden">
 <div id="draggable" style="width:5000px;height:5000px">
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         ....
     </ul>
  </div>
</div>

How can I know if the li element is visible in the user viewport (I mean really visible, not in the overflow area)?

Solution

  • have a look at this plugin

    It give's you the option to do the following selectors

    $(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")