Как проверить, находится ли элемент в поле зрения пользователя с помощью jquery

У меня очень большой перетаскиваемый div в моем окне. Этот div имеет меньшее окно.

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

Как я могу узнать, отображается ли элемент li в пользовательском окне просмотра (я имею в виду действительно видны, а не в области переполнения)?