Jquery无限滚动 – 使用div而非滚动条的正文

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

Answer 1

怎么样的东西：

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

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

---

如果要检测用户是否已滚动到底部特定div：

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

Answer 2

此代码已经过测试和validation。 滚动div时，代码会通过将滚动条高度与滚动条位置进行比较来检查滚动条是否到达底部。 如果是这样，它会调用一个获取更多内容的方法并将其附加到div。

请享用！

Koby

 $(document).ready(function () { $("div").scroll(function () { var $this = $(this); var height = this.scrollHeight - $this.height(); // Get the height of the div var scroll = $this.scrollTop(); // Get the vertical scroll position var isScrolledToEnd = (scroll >= height); $(".scroll-pos").text(scroll); $(".scroll-height").text(height); if (isScrolledToEnd) { var additionalContent = GetMoreContent(); // Get the additional content $this.append(additionalContent); // Append the additional content } }); }); 

根据您的评论，这是完整的HTML页面源代码（在IE 9下测试）：

**请确保您引用jquery库**

         
 
This is the div content
 
This is the div content
 
This is the div content
 
This is the div content
 
This is the div content
 
This is the div content
 
 Scroll Height:  
 Scroll position:    

Answer 3

我认为.scrollTop()是你的首选武器。 jQuery API

获取匹配元素集中第一个元素的滚动条的当前垂直位置。

因此，请确保将其绑定到正确的元素。 直接在div上我应该工作。

垂直滚动位置与可滚动区域上方的视图中隐藏的像素数相同。 如果滚动条位于最顶部，或者元素不可滚动，则此数字将为0。

因此，你可能要找到一种方法来计算div的高度，好像它将被拉伸而没有滚动条将这些数字放入数字中，以有意义的关系来拍摄加载事件。