我正在尝试检测当前 div(即用户当前看到的 div)并触发操作:http://jsfiddle.net/w7X9N/2293/
我已经尝试过此操作,但由于某种原因没有触发该操作。我也尝试过滚动,但仍然没有检测到白色背景 div
jQuery(
function($) {
$('#bla').bind('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('user viewing div');
}
})
}
);
#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>
最佳答案
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>
关于javascript - 检测当前是否看到第二个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39334866/