Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

I'm looking to create reverse infinite scroll inside a div; for a chat application that I'm building. The newly created chat messages are appended below the current stack of loaded messages. However, if the user has to view the old chat messages, they'll have to scroll up. 

I'm wondering how to do this inside of a `<div>`; and trigger an event when the scrollbar is say 300 pixels away from the top border of the div. 

After searching a bit, I found out that this is the recommended approach -

  2. $('.yourDiv').scroll(function(){
  3.     if( $(this).scrollTop()==0 ){
  4.         //some code
  5.     }   
  6. });
Reading the documentation, I'm not sure how do I pass on the `offset` value of 300 px so that the event gets triggered when user is 300px away from hitting the top. 

Would appreciate your guidance. Thank you in advance.