求助：解读无限滚动页面脚本及排查仅生成两页的问题

先看你提供的代码片段，核心问题其实很明显，咱们一步步拆解：

var counter = 0; 
$(window).scroll(function() { 
  if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 4) { 
    appendData(); 
  } 
}); 
function appendData() { 
  var html = ''; 
  for (i = 0; i < 1; i++) { 
    html += ''; 
  } 
  if (counter < 1) $('#myScroll').append('<? include_once 'GNC-10';?>'); 
  counter++; 
  if (count...

问题1：内容追加的条件太苛刻 #

在appendData()函数里，你只设置了counter < 1时才执行追加操作——也就是只有第一次调用这个函数（此时counter=0）会加载GNC-10，后续counter变成1、2、3时，这个判断都不成立，自然不会再加载新内容。这就是为什么你只能看到两个页面（初始页面+第一次追加的内容）。

问题2：滚动判断的精度问题 #

$(window).scrollTop() == $(document).height() - $(window).height()这个判断太死板，有些浏览器的滚动高度会是小数，或者滚动时不会精确触碰到这个值，导致触发不了加载逻辑。

问题3：冗余代码+不完整逻辑 #

那个for循环完全是多余的，循环一次加空字符串对结果没有任何影响；而且代码最后截断了，if (count...后面的逻辑缺失，也可能影响后续执行。

修复后的完整代码示例 #

我给你调整了逻辑，支持最多加载4次新内容（加上初始页面就是5个页面），同时优化了滚动触发的兼容性：

var counter = 0;
// 增加加载状态标记，防止滚动时重复触发加载
var isLoading = false;

$(window).scroll(function() {
  // 改成>=，并提前50px触发加载提升体验；同时判断加载状态
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 50 && counter < 4 && !isLoading) {
    appendData();
  }
});

function appendData() {
  isLoading = true;
  
  // 根据counter动态切换要加载的文件，比如GNC-10、GNC-11...以此类推
  var targetFile = 'GNC-' + (10 + counter);
  
  // 这里如果是PHP混写，确保路径正确；如果文件是单独的PHP，用AJAX更灵活（后面会给示例）
  $('#myScroll').append('<?php include_once "' + targetFile . '";?>');
  
  counter++;
  isLoading = false;
}

更优的AJAX异步加载方案 #

如果你的每个页面内容是独立的PHP文件，建议用AJAX异步加载，这样不会阻塞页面，体验更好：

var counter = 0;
var isLoading = false;

$(window).scroll(function() {
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 50 && counter < 4 && !isLoading) {
    appendData();
  }
});

function appendData() {
  isLoading = true;
  var targetFile = 'GNC-' + (10 + counter) + '.php'; // 假设文件是GNC-10.php、GNC-11.php...

  $.ajax({
    url: targetFile,
    type: 'GET',
    success: function(pageContent) {
      $('#myScroll').append(pageContent);
      counter++;
      isLoading = false;
    },
    error: function() {
      // 处理加载失败的情况，比如提示用户
      alert('页面加载失败，请稍后重试');
      isLoading = false;
    }
  });
}

额外说明 #

• 如果你需要加载更多页面，只需要把counter < 4改成你想要的次数就行，比如counter < 6就能加载6次新内容。
• 提前50px触发加载是为了让用户在滚动到底部前就开始加载，避免出现等待空白的情况，提升体验。

内容的提问来源于stack exchange，提问作者MJBasketballs