jquery - 当容器进入屏幕时触发事件

Question

我有一个元素从左到右滑入屏幕。它被包裹在一个div谁的margin-left变化中。这个包装器从屏幕右侧开始。元素以这种方式包装：

<div style="width:1000px; overflow: hidden;">
<div class="wrapper" style="margin-left: 1000px; width: 100000px" > <!-- margin-left dynamically changes -->
    <div class="first">some text</div>
    <div class="second">other text</div>
</div>
</div>

如何在屏幕上出现的第二个 div 上触发事件？

Answer 1

你应该看看onScreen jQuery 插件。它的作用类似于伪选择器，但允许您仅定位页面上出现的匹配元素。像这样：

$("span:onScreen");

Answer 2

我花了一段时间，但也感谢 Matthew R，我想出了如何将其setInterval()用作解决方案的一部分。

    <div class="outer" style="width:1000px; overflow: hidden;">
<div class="wrapper" style="margin-left: 1000px; width: 100000px" >
    <div class="first">some text</div>
    <div class="second">other text</div>
</div>
</div>
<script type="text/javascript">
setInterval(function() {
    var left = $("div.second").offset().left;
    if (left <= $('.outer').width()) { // actually I use a few more conditions
    // do some stuff
}
}, 1000);
</script>