jQuery无限滚动-使用div而不是正文滚动条 [英] Jquery infinite scroll - with div not scrollbar of body

问题描述

假设我有div，我想获取数据并将数据推送到该div中.当用户在div中滚动时，将获取下一组数据并将其推入div中.如何使用jQuery检测滚动条位置?我不想使用任何插件.我需要jQuery代码.这是一个示例链接，例如ahttp://www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html，但它使用了插件.

Suppose I have div and I want to fetch data and push data into that div. When the user scrolls within the div, the next set of data will be fetched and pushed into the div. How do I detect scroll bar position with jQuery? I don't want to use any plugin. I need jQuery code. Here is the sample link like ahttp://www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html but it used a plugin.

推荐答案

关于以下内容的事情如何?

How about something along the lines of:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       var new_div = '<div class="new_block"></div>';
       $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});

当滚动条到达页面底部时，这会将一个新元素添加到主页容器中.它还使用从外部脚本加载的内容填充此新元素.

This will append a new element to the main page container when the scrollbar reaches the bottom of the page. It also fills this new element with content loaded from an external script.

如果要检测用户是否已将特定div滚动到底部，则:

If you want to detect whether a user has scrolled to the bottom a specific div:

$('.some_element').bind('scroll', function(){
   if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
      var new_div = '<div class="new_block"></div>';
      $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});

这篇关于jQuery无限滚动-使用div而不是正文滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！