出现溢出-y滚动和jquery

Question

我有一个溢出的div：y;滚动;属性。当内部元素变得可见时（滚动内容），我想发出一个jquery函数。

我正在尝试使用jquery（https://github.com/bas2k/jquery.appear/），但它不起作用，因为它使用窗口视口作为参考。

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

这是关于jsfiddle的完整代码：link to code

Answer 1

我已经设置了一个似乎可以做你想做的事情的{jsfiddle}。{/ p>

以下是使用jQuery的.offset()和.scroll()函数的javascript：

修改 我刚刚意识到你可能只想在div首次出现时解雇它。 http://jsfiddle.net/LYw8m/

再次修改 我已将if语句添加到.scroll()之外，以便在评论中解决问题，如果div已经可见。

更新了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);