I need to load content while scrolling a div, not window. That's my CSS code:

#sidebar{
 width:30%;
 float:right;
 height:455px;
}
#video_list{
  height:100%;
  overflow:auto;
}

And this is my html code:

<div id="sidebar" >
 <!-- other -->
 <div id="video_list">
 </div>
</div>

Video_list is scrollable and the content is loaded by ajax call. When I go to the end of scrollbar i need to load content again. How can i determine the height of scrollable div ? I tried this:

if ($("#video_list").scrollTop()==$("#video_list").height()){
  loadContent();
 }

but it doesn't work !