如何在用户未达屏幕底部时触发滚动执行命令，提前加载视口外内容？

当然有可行的实现方式！你完全可以通过调整触发加载的滚动位置阈值，让动态内容在用户滚到视口底部前就完成加载，不用等到中途或者底部。核心思路是提前计算触发加载的滚动位置，而不是等到滚动距离触达文档底部才执行Ajax请求。

核心实现逻辑 #

我们需要判断当前滚动位置加上视口高度，再加上一个自定义的「提前加载阈值」，当这个总和接近文档总高度时，就触发加载逻辑。这样就能保证内容在用户滚动到视口底部前，已经在后台完成加载。

关键参数说明 #

• $(window).scrollTop()：获取当前页面滚动的垂直距离
• $(window).height()：获取当前浏览器视口的高度
• $(document).height()：获取整个文档的总高度（包括未显示的部分）
• 提前加载阈值：你可以自定义一个数值（比如500px），代表距离底部还有多少像素时就触发加载，数值越大，加载时机越早

完整代码示例 #

假设你的Ajax加载函数叫loadDynamicContent()，可以这样修改滚动监听逻辑：

// 定义加载状态标记，防止重复触发Ajax
let isLoading = false;

$(window).scroll(function() {
  // 自定义提前加载阈值，可根据你的内容高度调整
  const preloadThreshold = 500;
  
  // 计算当前滚动位置 + 视口高度
  const currentScrollOffset = $(window).scrollTop() + $(window).height();
  // 获取文档总高度
  const totalDocumentHeight = $(document).height();
  
  // 当滚动位置接近底部（加上提前阈值）且未在加载时，触发请求
  if (currentScrollOffset + preloadThreshold >= totalDocumentHeight && !isLoading) {
    isLoading = true;
    // 调用你的Ajax加载函数
    loadDynamicContent()
      .then(() => {
        // 加载完成后重置状态
        isLoading = false;
      })
      .catch(() => {
        // 出错时也要重置状态，避免后续无法触发
        isLoading = false;
      });
  }
});

// 示例Ajax加载函数
function loadDynamicContent() {
  return $.ajax({
    url: '/your-api-endpoint',
    method: 'GET',
    // 你的请求参数等配置
  }).done(function(data) {
    // 将新内容插入到页面中
    $('#content-container').append(data);
  });
}

关于outerHeight()和offset()的场景 #

如果你的滚动容器不是整个window（比如某个带滚动条的div），或者需要基于特定元素的位置触发加载，就会用到这两个方法：

1. 针对自定义滚动容器：把window换成容器选择器，用$('#scroll-container').scrollTop()获取滚动位置，$('#scroll-container').outerHeight()获取容器高度，$('#scroll-container')[0].scrollHeight获取容器内内容的总高度
2. 基于特定元素位置触发：比如当某个元素距离视口还有N像素时加载，可以用$(element).offset().top获取元素的顶部位置，再结合视口高度和阈值计算触发点：

const targetElement = $('#next-content-trigger');
// 计算触发位置：元素顶部 - 视口高度 - 提前阈值
const triggerPosition = targetElement.offset().top - $(window).height() - 500;

$(window).scroll(function() {
  if ($(window).scrollTop() >= triggerPosition && !isLoading) {
    isLoading = true;
    loadDynamicContent().then(() => isLoading = false);
  }
});

注意事项 #

• 一定要加isLoading状态标记，避免滚动事件连续触发导致重复请求
• 提前加载阈值的大小可以根据你每次加载的内容高度调整，比如每次加载的内容高度是800px，就把阈值设为800px，确保用户看完当前内容时，新内容已经加载完成
• 如果页面内容会动态变化（比如加载新内容后文档高度增加），$(document).height()会自动更新，不需要额外处理

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