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

How to detect browser scroll reached to bottom of each element?

本文关键字：元素 底部 滚动 浏览器 何检测 检测      更新时间：2023-09-26

我有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的最小高度等于窗口高度。

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

谢谢，

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.
}

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

相关文章：