如何根据 div 容器的滚动位置进行无限滚动？答案

【问题标题】：How to get work Infinite scroll depending on div container's scroll position?如何根据 div 容器的滚动位置进行无限滚动？
【发布时间】：2015-11-08 16:34:12
【问题描述】：

我正在寻找一个无限滚动脚本，但找不到真正适合我需要的。我找到了一个很棒的，但问题是脚本在用户使用浏览器滚动条向下滚动后工作。相反，它应该根据 div 的“滚动”位置加载和显示更多数据。

我该怎么做？它不一定是这个脚本，但它应该包含一个 mysql 查询函数，所以我可以轻松实现我的，因为我真的是 Javascript、jQuery 等方面的新手。教程也可以......但不能真的找到一个。所有这些都取决于浏览器的滚动位置。

这就是我正在使用的脚本： github.com/moemoe89/infinite-scroll/blob/master/index.php

我只做了一个修改：

news_area{ width:400px; height:95px;  overflow:auto;}

提前致谢！

【问题讨论】：

请将代码的相关部分添加到问题中，以便问题可以独立存在。

标签： infinite-scroll

【解决方案1】：

不要使用$(window).scrollTop()，而是使用您希望从中获取滚动位置的任何容器，例如$('.scrollable').scrollTop()。

$('.scrollable').on('scroll', function(){
  var $el = $(this);
  $('.scrolled').text($(this).scrollTop());
  if( $el.innerHeight()+$el.scrollTop() >= this.scrollHeight-5 ){
    var d = new Date();
    $el.append('more text added on '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()+'<br>');
  }
});

div {
  height: 50px;
  border: 1px solid gray;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scrolled from top: <span class="scrolled">0</span></p>
<div class="scrollable">
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
</div>

【讨论】：

感谢您的回复！ :)) 我试过这样但它不起作用： $('#news_area').on('scroll', function(){$('.scrolled').text($(this).scrollTop( ));}); if($('#news_area').scrollTop() + $(window).height() == $(document).height()) {}
我更新了示例以显示 div 中的实际无限滚动以及如何添加自己的内容。
啊，你真是个天才！太感谢了。它就像魅力一样。 :)))
我可以问你点别的吗？有没有办法像 facebook 私人信使一样简单地显示内容，并通过向上滚动而不是向下滚动来显示更多内容？
也许您可能想在 stackoverflow 上问另一个问题。确保尽可能具体，以便其他人可以帮助您。