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>

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

2 个答案: