无限滚动不工作在谷歌浏览器

Infinite Scrolling Not working in Google Chrome

本文关键字:谷歌浏览器 工作 滚动 无限      更新时间:2023-09-26

我有以下脚本,使页面从数据库中获取更多记录,并在页面末尾加载它们。它在Mac上的Safari 10.0上运行良好,但在Google Chrome 53.0.2785.143上运行不佳。如果我把Chrome浏览器窗口的大小调整到接近智能手机的大小,它就会开始工作。

当控制台不工作时没有任何东西,所以没有任何错误要调试。如果我观察web服务器日志,当我尝试向下滚动页面时,没有请求,所以根本没有发生任何事情。

脚本如下:

< script type = "text/javascript" >
  var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadArticle(skip);
    skip += 20;
  }
});
function loadArticle(pageNumber) {
  $('#inifiniteLoader').show('fast');
  $.ajax({
    url: "getMoreEvents.php",
    type: 'POST',
    data: "action=" + action + "&skip=" + skip,
    success: function(html) {
      $('#inifiniteLoader').hide('1000');
      $("#content").append(html); // This will be the div where our content will be loaded
    }
  });
  return false;
} < /script>

$(window).scroll(function() {
  if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
    loadArticle(skip);
    skip += 20;

我有完全相同的问题。它在我尝试的每个浏览器上工作,甚至在本地服务器上运行的chrome上工作,但当我将我的项目部署到Heroku运行在https安全服务器上时却没有。这是相当恼人的行为,这似乎是一个错误的Chrome。

解决方案是在页面结束前调用该函数,并留下一个小的"间隙"。

解决方案如下:Vytaliy Makovyak解决方案