Javascript 使用jQuery检测用户何时滚动到div的底部

我有一个div框（称为flux），里面有可变数量的内容。 此divbox已将溢出设置为自动

现在，我想做的是，当使用滚动到此DIV框底部时，将更多内容加载到页面中，我知道如何执行此操作（加载内容），但我不知道如何检测用户何时滚动到DIV标记的底部？ 如果我想对整个页面执行此操作，我会选择.scrollTop并从.height中减去它

但我似乎不能在这里这么做

我尝试从flux中获取.scrollTop，然后将所有内容包装到名为inner的div中，但是如果我获取flux的innerHeight，它将返回564px（div的高度设置为500），而'inner'的高度将返回1064，scrollTop在div底部时显示564

---

我能做什么？

您可以使用一些属性/方法：

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

var element = docuement.getElementById('flux');
if (element.offsetHeight + element.scrollTop === element.scrollHeight) {
  // element is at the end of its scroll, load more content
}

所以你可以取前两个属性的和，当它等于最后一个属性时，你就到了终点：

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

编辑：我已根据以下内容将“绑定”更新为“打开”：

从jQuery1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法

---

这里只是一个额外的注意事项，因为我在寻找我想要滚动的固定div的解决方案时发现了这一点。对于我的场景，我发现最好考虑div上的填充，这样我就可以准确地到达末尾。因此，在@Dr.Molle的回答上，我添加了以下内容

$('#flux').bind('scroll', function() {
    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
    var divTotalHeight = $(this)[0].scrollHeight 
                          + parseInt($(this).css('padding-top'), 10) 
                          + parseInt($(this).css('padding-bottom'), 10)
                          + parseInt($(this).css('border-top-width'), 10)
                          + parseInt($(this).css('border-bottom-width'), 10);

    if( scrollPosition == divTotalHeight )
    {
      alert('end reached');
    }
  });

---

这将为您提供精确的位置，包括填充和边框

我找到了一个解决方案，当您滚动窗口和从底部显示的div结尾时，会向您发出警报

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});

---

在本例中，如果在div（

.posts

）完成时向下滚动，则会给您一个警报。

但这对我很有效

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});

$（窗口）。滚动（函数（）{
if（$（window.scrollTop（）>=（$（document.height（）-$（window.height（））-$（'#divID'）.innerHeight（））{
console.log（“已到达div”）；
}
});

这是另一个版本

关键代码是函数scroller（），它使用overflow:scroll将输入作为包含滚动部分的div的高度。它与顶部或底部的距离约为5px或10px。否则太敏感了。似乎10px是最小值。您将看到它将div高度增加10以获得底部高度。我想5px可能会起作用，我没有进行广泛的测试。YMMV。scrollHeight返回内部滚动区域的高度，而不是div的显示高度，在本例中为400px

<?php

$scrolling_area_height=400;
echo '
<script type="text/javascript">
          function scroller(ourheight) {
            var ourtop=document.getElementById(\'scrolling_area\').scrollTop;
            if (ourtop > (ourheight-\''.($scrolling_area_height+10).'\')) {
                alert(\'at the bottom; ourtop:\'+ourtop+\' ourheight:\'+ourheight);
            }
            if (ourtop <= (5)) {
                alert(\'Reached the top\');
            }
          }
</script>

<style type="text/css">
.scroller { 
            display:block;
            float:left;
            top:10px;
            left:10px;
            height:'.$scrolling_area_height.';
            border:1px solid red;
            width:200px;
            overflow:scroll; 
        }
</style>

$content="your content here";

<div id="scrolling_area" class="scroller">
onscroll="var ourheight=document.getElementById(\'scrolling_area\').scrollHeight;
        scroller(ourheight);"
        >'.$content.'
</div>';

?>

如果有人将

scrollHeight

设置为

未定义的
，然后选择元素的第一个子元素：
mob\u top\u菜单[0]。scrollHeight
不确定是否有帮助，但我就是这样做的

我有一个索引面板，它比窗口大，我让它滚动直到达到这个索引的末尾。然后我把它固定好。当您滚动到页面顶部时，该过程将反转

问候

<style type="text/css">
    .fixed_Bot {    
            position: fixed;     
            bottom: 24px;    
        }     
</style>

<script type="text/javascript">
    $(document).ready(function () {
        var sidebarheight = $('#index').height();
        var windowheight = $(window).height();


        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();

            if (scrollTop >= sidebarheight - windowheight){
                $('#index').addClass('fixed_Bot');
            }
            else {
                $('#index').removeClass('fixed_Bot');
            }                   
        });
    });

</script>


.fixed_Bot{
位置：固定；
底部：24px；
}     
$（文档）.ready（函数（）{
var sidebarheight=$（“#index”）.height（）；
var windowheight=$（window.height（）；
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
如果（scrollTop>=侧边栏高度-窗口高度）{
$（'#index'）.addClass（'fixed#Bot'）；
}
否则{
$（'#index'）.removeClass（'fixed#Bot'）；
}                   
});
});
如果您需要在具有overflow-y作为隐藏或滚动的div上使用此选项，您可能需要类似的选项

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
    at_bottom = true;
}

if（$（'#element'）.prop（'scrollHeight'）-$（'#element'）.scrollTop（）虽然这个问题是5.5年前提出来的，但它在今天的UI/UX环境中仍然非常重要。我想再加上我的两分钱

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        // element is at the end of its scroll, load more content
    }

资料来源：

某些元素不允许您滚动元素的整个高度。在这些情况下，您可以使用：

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

var element = docuement.getElementById('flux');
if (element.offsetHeight + element.scrollTop === element.scrollHeight) {
  // element is at the end of its scroll, load more content
}

如果您没有使用Math.round（）函数，Molle博士的解决方案在浏览器窗口具有缩放的某些情况下将不起作用

比如说
$（此）.scrollTop（）+$（此）.innerHeight（）=600

$（此[0]。scrollHeight的收益率为599.99998

600>=599.99998失败

以下是正确的代码：

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
            alert('end reached');
        }
    })
});

如果不需要严格的条件，还可以添加一些额外的边距像素

var margin = 4

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
            alert('end reached');
        }
    })
});

伙计们，这是缩放问题的解决方案，适用于所有缩放级别，以防您需要：

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {
                    console.log("bottom");
                    // We're at the bottom!
                }
            });
        }

是github上的代码。
虽然这是近6年前提出的问题，但在UX设计中仍然是热门话题，如果有新手想使用，这里有一个演示片段


$（函数（）{
/*这仅用于演示目的*/
var t=$（'.posts'）.html（），
c=1，
scroll_enabled=true；
函数加载_ajax（）{
/*在此处调用ajax…成功后启用滚动*/
$（'.posts'）.append（'+（++c）+''++t）；
/*再次启用滚动加载*/
scroll_enabled=true；
}
$（窗口）.bind（'scroll'，function（）{
如果（已启用滚动）{
/*如果90%滚动*/
如果（$（window）.scrollTop（）>=（$（'.posts'）.offset（）.top+$（'.posts'）.outerHeight（）-window.innerHeight）*0.9）{
/*加载ajax内容*/
滚动_enabled=false；
加载_ajax（）；
}
}
});
})；
h4{
颜色：红色；
字体大小：36px；
背景颜色：黄色；
}

同一天，我们将与奥古斯·尼布·拉库斯（augue nibh lacus）在拉齐尼亚（lacinia）和拉齐尼亚（Laonia）两个城市的居民生活在一起，而不是在亨德雷特（hendrerit）两个城市之间
智者佩伦茨克（sapien Pellentsque）和奥古斯·尼布·拉库斯（augue nibh lacus）分别在拉齐尼亚（lacinia）和拉齐尼亚（Ornare Nonumy laoreet）两个城市生活在一起