Question

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

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

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

我只做了一次修改：

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

提前致谢！

Answer 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>

如何获得工作无限滚动取决于div容器的滚动位置？

1 个答案: