jQuery Jquery无限滚动 - div不是身体的滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10072216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery infinite scroll - with div not scrollbar of body
提问by Thomas
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.
假设我有 div 并且我想获取数据并将数据推送到该 div 中。当用户在 div 内滚动时，将获取下一组数据并将其推送到 div 中。如何使用 jQuery 检测滚动条位置？我不想使用任何插件。我需要jQuery代码。这是像 http://www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html 这样的示例链接，但它使用了插件。
回答by hohner
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.
当滚动条到达页面底部时，这将向主页面容器附加一个新元素。它还使用从外部脚本加载的内容填充这个新元素。
If you want to detect whether a user has scrolled to the bottom a specific div:
如果要检测用户是否已滚动到特定 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'));
}
});
回答by Koby Mizrahy
This code has been tested and verified as working. When you scroll your div, the code checks if the scroller reached to the bottom by comparing the scroller height against the scroller position. If so, it calls to a method that gets more content and append it to the div.
此代码已经过测试和验证可以正常工作。当您滚动 div 时，代码通过将滚动条高度与滚动条位置进行比较来检查滚动条是否到达底部。如果是这样，它会调用一个获取更多内容并将其附加到 div 的方法。
Enjoy!
享受！
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
}
});
});
Per your comment, here is the entire HTML page source code which is working (tested under IE 9):
根据您的评论，这里是正在运行的整个 HTML 页面源代码（在 IE 9 下测试）：
** Please make sure you are referencing jquery library **
** 请确保您正在引用 jquery 库 **
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Image</title>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(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
}
});
});
function GetMoreContent() {
return "<p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p>";
}
</script>
</head>
<body>
<div style="overflow: scroll;height: 150px; border: 1px solid red;">
<p>This is the div content</p>
<p>This is the div content</p>
<p>This is the div content</p>
<p>This is the div content</p>
<p>This is the div content</p>
<p>This is the div content</p>
</div>
Scroll Height: <span class="scroll-height"></span> <br/>
Scroll position: <span class="scroll-pos"></span>
</body>
</html>
回答by nuala
I think .scrollTop()is your weapon of choice. jQuery API
我认为.scrollTop()是你的首选武器。jQuery API
Get the current vertical position of the scroll bar for the first element in the set of matched elements.
获取匹配元素集中第一个元素的滚动条的当前垂直位置。
So make sure to bind it to the right element. Directly on the div should work I guess.
因此，请确保将其绑定到正确的元素。我想直接在 div 上应该可以工作。
The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.
垂直滚动位置与可滚动区域上方隐藏的像素数相同。如果滚动条在最顶部，或者元素不可滚动，则此数字将为 0。
So probably you've to find a way to calculate the height of the div as if it would be stretched without scrollbar to put these to numbers in a meaningful relation to shoot of the loading event.
因此，您可能必须找到一种方法来计算 div 的高度，就好像它会在没有滚动条的情况下被拉伸以将这些数字与加载事件的拍摄具有有意义的关系。
