假设我有 div，我想获取数据并将数据推送到该 div。当用户在 div 内滚动时，将获取下一组数据并将其推送到 div 中。如何使用 jQuery 检测滚动条位置？我不想使用任何插件。我需要 jQuery 代码。这是示例链接，例如 http://www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html，但它使用了插件。
【问题讨论】：
标签： jquery
这样的事情怎么样：
$(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'));
}
});
当滚动条到达页面底部时，这将在主页面容器中添加一个新元素。它还使用从外部脚本加载的内容填充这个新元素。
如果你想检测用户是否滚动到底部特定的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'));
}
});
【讨论】：
overflow-y:auto 的 div，以下逻辑对我有用：$(this).scrollTop() === ($(this)[0].scrollHeight - $(this).innerHeight())。
此代码已经过测试和验证，可以正常工作。当您滚动 div 时，代码会通过比较滚动条高度与滚动条位置来检查滚动条是否到达底部。如果是这样，它会调用一个获取更多内容并将其附加到 div 的方法。
享受吧！
科比
$(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 库 **
<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>
【讨论】：
我认为.scrollTop() 是您的首选武器。 jQuery API
获取第一个滚动条的当前垂直位置 匹配元素集合中的元素。
因此请确保将其绑定到正确的元素。我猜直接在 div 上应该可以工作。
垂直滚动位置与滚动的像素数相同 隐藏在可滚动区域上方的视图中。如果滚动条是 在最顶部，或者如果元素不可滚动，这个数字将 为 0。
因此，您可能必须找到一种方法来计算 div 的高度，就好像它会在没有滚动条的情况下被拉伸，以将这些数字与加载事件的拍摄建立有意义的关系。
【讨论】：
要实现该行为，您不需要 jquery 或 jquery 插件，只需使用 Vanilla Javascript 和 IntersectionObserver API 即可。
您需要做的就是放置元素并在它们出现在屏幕上时进行监听。
你可以用几行 javascript 和 html 来完成它，它比在浏览器中监听滚动事件的性能要好得多
我最近整理了一篇关于无限滚动和这种特定行为的文章here
我希望它可以作为您特定需求的指导
【讨论】：