Overflow-y scroll and jquery appear

Question

I've a div with overflow-y: scroll; property. I'd like to fire a jquery function when an inner element became visible (scrolling the content).

I'm trying to use jquery appear (https://github.com/bas2k/jquery.appear/) but it doesn't work because it use the window viewport as reference.

$(document).ready(function($) {
  $('#alert').appear(function() {
    alert('Ok');
  });
});

#overflow {
  width: 100px;
  height: 200px;
  overflow-y: scroll;
}

<div id="overflow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus id arcu at luctus. Nulla nec bibendum diam. Nunc pellentesque eros nisl. Curabitur ornare libero dictum lectus tincidunt, nec pretium ante lobortis. Morbi ut nunc sit amet eros
  interdum ultricies non non leo. In pretium nunc vel sapien imperdiet, et dapibus urna porta. Donec in tincidunt risus. Nam eu pharetra dui, eget dignissim libero. Quisque ut malesuada nisl, quis adipiscing orci. Proin ultrices blandit tortor. Praesent
  scelerisque lectus volutpat nunc rutrum condimentum. Praesent fringilla orci augue, quis egestas arcu tincidunt quis. Mauris varius enim nec massa accumsan tincidunt. Proin tempor mi quis dui scelerisque, quis laoreet augue iaculis. Suspendisse dignissim
  facilisis neque, quis malesuada mauris hendrerit eu. Integer cursus tristique interdum. Mauris tempus semper lectus in scelerisque. Vivamus nunc sem, tempor id nunc quis, mattis hendrerit massa. Cras sit amet leo sit amet justo rhoncus ornare. In blandit
  augue sit amet posuere viverra. Etiam a egestas sapien, gravida convallis elit. Nunc malesuada justo sit amet hendrerit hendrerit. In molestie felis non sem commodo vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
  ac turpis egestas. Duis et venenatis mauris. Nullam commodo congue rhoncus. Integer molestie dolor quis tellus vulputate, in tempor lorem eleifend. Etiam accumsan a magna vitae condimentum. Quisque ullamcorper mauris sed volutpat scelerisque. Praesent
  eget erat sit amet nulla gravida faucibus. Nunc eget libero lacus. In hac habitasse platea dictumst. Phasellus aliquam tincidunt interdum. Vivamus aliquet dapibus felis, sed pellentesque ipsum ornare et. Phasellus ac risus commodo, condimentum sem sed,
  consectetur velit. Morbi vulputate mauris velit, sed ornare elit suscipit eget. Aliquam volutpat erat risus, vitae euismod leo fermentum et. Sed vitae neque aliquam, convallis purus eget, ultricies urna.
  <div id="alert">Alert</div>

Here's my complete code on jsfiddle: link to code

Answer 1

I've set up a jsfiddle that seems to do what you want http://jsfiddle.net/LYw8m/.

Here is the javascript using jQuery's .offset() and .scroll() functions:

Edit: I just realised you probably only want to fire this when the div first appears. http://jsfiddle.net/LYw8m/2/

Edit again: I've added the if statement to outside the .scroll() to solve the issue in your comment if the div is already visible.

Updated js:

$(document).ready(function(){

var event_fired = false;
if( $("#alert").offset().top <= ( $(this).offset().top + $(this).height() ) 
    && !event_fired ){
    alert('Ok!');
    event_fired = true;
}

$(".overflow").scroll(function(){
    if( $("#alert").offset().top <= ( $(this).offset().top + $(this).height() ) 
        && !event_fired ){
        alert('Ok!');
        event_fired = true;
    }
    else if ( $("#alert").offset().top > ( $(this).offset().top + $(this).height() ){
        event_fired = false;
    }
});

});

Answer 2

$("#mydiv").append("My data")
// di chuyen den hoi thoi moi nhat (cuoi trang)
var newmsg_top = parseInt($('#mydiv')[0].scrollHeight );
$('#mydiv').scrollTop(newmsg_top);