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

现在,我要做的是,当使用滚动到这个div框的底部,加载更多的内容到页面,我知道如何做到这一点(加载内容),但我不知道如何检测当用户已经滚动到div标签的底部? 如果我想对整个页面都这样做,我将使用。scrolltop并从。height中减去它。

但我在这里好像做不到?

我已经尝试从通量。scrolltop,然后包装内的所有内容在一个div称为内部,但如果我采取通量的innerHeight它返回564px (div被设置为500作为高度)和“内部”的高度它返回1064,而滚动顶部,当在div的底部说564。

我该怎么办?


当前回答

如果你需要在一个隐藏了overflow-y或滚动的div上使用它,像这样的东西可能就是你需要的。

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

我发现celll是需要的,因为prop scrollHeight似乎是圆的,或者可能是其他原因导致这是由小于1。

其他回答

虽然这个问题是在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
    }

来源:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight Determine_if_an_element_has_been_totally_scrolled

有些元素不允许滚动元素的整个高度。在这些情况下,你可以使用:

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

没有一个答案对我有用,但这个答案对我有用:

$(window).on('scroll', function() {
    if ($(window).scrollTop() >= $('#flux').offset().top + $('#flux').outerHeight() - window.innerHeight) {
        alert('You reached the end of the DIV');
    }
});

在简单的DOM使用中,您可以检查条件

element.scrollTop + element.clientHeight == element.scrollHeight

如果是这样,那么你已经到达了终点。

虽然这个问题在6年前就被问到了,但在UX设计中仍然是一个热门话题,如果有新手想用的话,这里有一个演示片段

$(function() { /* this is only for demonstration purpose */ var t = $('.posts').html(), c = 1, scroll_enabled = true; function load_ajax() { /* call ajax here... on success enable scroll */ $('.posts').append('<h4>' + (++c) + ' </h4>' + t); /*again enable loading on scroll... */ scroll_enabled = true; } $(window).bind('scroll', function() { if (scroll_enabled) { /* if 90% scrolled */ if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) { /* load ajax content */ scroll_enabled = false; load_ajax(); } } }); }); h4 { color: red; font-size: 36px; background-color: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="posts"> Lorem ipsum dolor sit amet 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> 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> 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> 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 </div>

不过这对我来说很管用

$(window).scroll(function() {
  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
    console.log('div reached');
  }
});