javascript - overflow-y scroll 和 jquery 出现

Question

我有一个带有 overflow-y 的 div: scroll;属性(property)。我想在内部元素可见(滚动内容)时触发 jquery 函数。

我正在尝试使用 jquery appear ( https://github.com/bas2k/jquery.appear/ ) 但它不起作用，因为它使用窗口视口(viewport)作为引用。

$(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，它似乎可以做你想做的事 http://jsfiddle.net/LYw8m/ .

这是使用 jQuery 的 .offset() 和 .scroll() 函数的 javascript:

编辑: 我刚刚意识到你可能只想在 div 第一次出现时触发它。 http://jsfiddle.net/LYw8m/2/

再次编辑: 如果 div 已经可见，我已将 if 语句添加到 .scroll() 之外，以解决您评论中的问题。

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

});