Question

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

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

但我似乎无法在这做到这一点？

我尝试从flux中获取.scrollTop，然后将所有内容包装在一个名为inner的div中，但是如果我使用innerHeight of flux它返回564px（div设置为500作为高度）和高度'innner'它返回1064，而scroll的底部则是564。

我该怎么办？

Answer 1

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

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

所以你可以得到前两个属性的总和，当它等于最后一个属性时，你已经到了最后：

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

http://jsfiddle.net/doktormolle/w7X9N/

编辑：我已根据以下内容将'bind'更新为'on'：

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

Answer 2

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

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

在此示例中，如果在div（.posts）完成时向下滚动，则会给出警报。

Answer 3

尽管问题是在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
}

Answer 4

这里只是另外一个注释，因为我在寻找一个我想要滚动的固定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');
    }
  });

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

Answer 5

虽然这对我有用

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

Answer 6

如果你没有使用Math.round（）函数，当浏览器窗口有缩放时，Dr.Molle的解决方案suggested在某些情况下将无效。

例如 $（this）.scrollTop（）+ $（this）.innerHeight（）= 600

$（this）[0] .scrollHeight yield = 599.99998

600＆gt; = 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');
        }
    })
});

Answer 7

如果你需要在一个具有溢出-y隐藏或滚动的div上使用它，那么你可能需要这样的东西。

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

我发现ceil是必需的，因为prop scrollHeight似乎是圆形的，或者可能是其他一些导致它被关闭的原因不到1。

Answer 8

如果有人将scrollHeight作为undefined，则选择元素＆＃39;第一个子元素：mob_top_menu[0].scrollHeight

Answer 9

不确定是否有任何帮助，但我就是这样做的。

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

问候。

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

Answer 10

尽管这被问了将近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>

Answer 11

这是缩放问题的解决方案，它适用于所有缩放级别，以备不时之需：

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

Answer 12

$(window).on("scroll", function() {
    //get height of the (browser) window aka viewport
    var scrollHeight = $(document).height();
    // get height of the document 
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        // code to run when scroll to bottom of the page
    }
});

This是github上的代码。

Answer 13

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

ilength := length(sDetails);
if (ilength IN [0..9] )
then showmessage('You have to insert more than 10 characters') else showmessage('Thank you') ;

如果为true，则说明您已经结束。

Answer 14

我精心编写了这段代码，该代码对我有用，可以检测到我何时滚动到元素的末尾！

let element = $('.element');

if ($(document).scrollTop() > element.offset().top + element.height()) {

     /// do something ///
}

Answer 15

这是另一个版本。

键代码是函数scroller（），它使用overflow：scroll将输入作为包含滚动部分的div的高度。它在顶部或底部与顶部近似5px，从底部近似10px。否则它太敏感了。似乎10px是最小的。你会看到它增加10到div高度以获得底部高度。我假设5px可能有效，我没有进行大量测试。因人而异。 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>';

?>

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

15 个答案: