检测当前是否看到第二个div

Question

我正在尝试检测用户当前看到的当前div当前div并触发操作：http://jsfiddle.net/w7X9N/2293/

我试过这个，但由于某种原因没有触发动作。我也尝试过滚动但仍然没有检测到白色背景div

＆＃13;

＆＃13;

jQuery(
  function($) {
    $('#bla').bind('scroll', function() {
      if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        alert('user viewing div');
      }
    })
  }
);

＆＃13;

#flux {
  width: 200px;
  height: 150px;
  overflow: auto;
}
#bla {
  background: #FFF
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flux">
  <div id="flux2">
    Lorem ipsum dolor sit amet
    <br>Consectetuer augue nibh lacus at
    <br>Pretium Donec felis dolor penatibus
    <br>Phasellus consequat Vivamus dui lacinia
    <br>Ornare nonummy laoreet lacus Donec
    <br>Ut ut libero Curabitur id
    <br>Dui pretium hendrerit sapien Pellentesque
    <br>

  </div>
  <div id="bla">
    THIS IS THE DIV THAT SHOULD TIGGER ACTION
    <br>Phasellus consequat Vivamus dui lacinia
    <br>Ornare nonummy laoreet lacus Donec
    <br>Ut ut libero Curabitur id
    <br>Dui pretium hendrerit sapien Pellentesque
    <br>Pretium Donec felis dolor penatibus
    <br>Phasellus consequat Vivamus dui lacinia
    <br>Ornare nonummy laoreet lacus Donec
    <br>Ut ut libero Curabitur id
    <br>Dui pretium hendrerit sapien Pellentesque
    <br>Pretium Donec felis dolor penatibus
    <br>Phasellus consequat Vivamus dui lacinia
    <br>Ornare nonummy laoreet lacus Donec
    <br>Ut ut libero Curabitur id
    <br>Dui pretium hendrerit sapien Pellentesque
    <br>
  </div>
  <div id="another-div">
    <br>123456
    <br>123456
    <br>123456
    <br>123456
    <br>123456
    <br>123456
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

var viewed = 0;
$('div#flux').scroll(function() {    
    if ($(this).scrollTop() >= $('#bla').offset().top && viewed==0) {
      alert('user viewing div');
      viewed = 1;
    }
});

#flux {
  width: 200px;
  height: 150px;
  overflow: auto;
}
#bla {
  background: #FFF
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flux">
  <div id="flux2">
    Lorem ipsum dolor sit amet
    <br> Consectetuer augue nibh lacus at
    <br> Pretium Donec felis dolor penatibus
    <br> Phasellus consequat Vivamus dui lacinia
    <br> Ornare nonummy laoreet lacus Donec
    <br> Ut ut libero Curabitur id
    <br> Dui pretium hendrerit sapien Pellentesque
    <br>

  </div>
  <div id="bla">
    THIS IS THE DIV THAT SHOULD TIGGER ACTION
    <br> Phasellus consequat Vivamus dui lacinia
    <br> Ornare nonummy laoreet lacus Donec
    <br> Ut ut libero Curabitur id
    <br> Dui pretium hendrerit sapien Pellentesque
    <br>Pretium Donec felis dolor penatibus
    <br> Phasellus consequat Vivamus dui lacinia
    <br> Ornare nonummy laoreet lacus Donec
    <br> Ut ut libero Curabitur id
    <br> Dui pretium hendrerit sapien Pellentesque
    <br>Pretium Donec felis dolor penatibus
    <br> Phasellus consequat Vivamus dui lacinia
    <br> Ornare nonummy laoreet lacus Donec
    <br> Ut ut libero Curabitur id
    <br> Dui pretium hendrerit sapien Pellentesque
    <br>
  </div>
  <div id="another-div">
    <br>123456
    <br>123456
    <br>123456
    <br>123456
    <br>123456
    <br>123456
  </div>

</div>

Answer 2

您正在检查“滚动”错误的元素。只需重写$（'＃bla'）。bind（'scroll'... to $（'＃flux'）。bind（'scroll'...