Question

我有5个不同高度的div元素。例如：

<body>
    <div id="d1" style="height: 800px; float: left; width:100%;"></div>
    <div id="d2" style="height: 920px; float: left; width:100%;"></div>
    <div id="d3" style="height: 876px; float: left; width:100%;"></div>
    <div id="d4" style="height: 1200px; float: left; width:100%;"></div>
    <div id="d5" style="height: 1105px; float: left; width:100%;"></div>
</body>

div的最小高度等于窗口高度。

如何检测用户何时滚动到每个元素的底部？

谢谢，

Answer 1

我猜jquery.viewport可以解决您的问题。

Answer 2

jQuery解决方案（在滚动事件监听器中）

var winHeight = $(window).height();
if ($(document).scrollTop() >= $('#d5').offset().top + $('#d5').height() - winHeight) {
    // scrolled to the bottom of d5 div.
} else if ($(document).scrollTop() >= $('#d4').offset().top + $('#d4').height() - winHeight) {
    // scrolled to the bottom of d4 div.
} else if ($(document).scrollTop() >= $('#d3').offset().top + $('#d3').height() - winHeight) {
    // scrolled to the bottom of d3 div.
} else if ($(document).scrollTop() >= $('#d2').offset().top + $('#d2').height() - winHeight) {
    // scrolled to the bottom of d2 div.
} else if ($(document).scrollTop() >= $('#d1').offset().top + $('#d1').height() - winHeight) {
    // scrolled to the bottom of d1 div.
}

如何检测浏览器滚动到达每个元素的底部？

2 个答案: