页面宽度小于981px时无限滚动失效的解决方法咨询

首先，你遇到的这个小屏无限滚动失效的问题，大概率是因为滚动触发条件的判断逻辑不够健壮，再加上移动端浏览器的特殊行为干扰导致的，咱们一步步拆解解决：

1. 先修正最容易踩坑的判断精度问题 #

你当前用==来判断滚动到底部，但实际场景里（尤其是移动端），scrollTop的值可能是小数，或者浏览器的滚动触发时机不会刚好让这个等式完全成立，导致触发条件永远不满足。把判断改成>=再加上一点缓冲值，就能解决大部分精度问题：

$(window).scroll(function () {
  // 用 >= 代替 ==，额外减10是给个缓冲范围，避免因像素精度问题触发失败
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
    console.log("infinite scroll works");
  }
});

2. 适配移动端浏览器的视口动态变化 #

移动端浏览器的地址栏会随着滚动收起/展开，导致$(window).height()的值随时变化，这会打乱你的底部判断逻辑。改用原生JS的视口计算方式，兼容性和稳定性会更好：

$(window).scroll(function () {
  // 用原生JS获取滚动位置、文档总高度、视口高度，兼容性更强
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = document.documentElement.clientHeight;

  if (scrollTop >= documentHeight - windowHeight - 10) {
    console.log("infinite scroll works");
  }
});

3. 捕获移动端的触摸滚动事件 #

有些移动端浏览器的scroll事件触发频率极低，或者需要结合touchmove事件才能正确捕获滚动行为，同时监听这两个事件能覆盖更多场景：

// 同时监听scroll和touchmove事件，确保移动端滚动被正确捕获
$(window).on('scroll touchmove', function () {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = document.documentElement.clientHeight;

  if (scrollTop >= documentHeight - windowHeight - 10) {
    console.log("infinite scroll works");
  }
});

4. 排查小屏布局的干扰元素 #

如果你的页面在小屏下有固定定位的导航栏、底部栏，这些元素会占据视口高度，但你的计算逻辑没把它们的高度排除，导致实际滚动到底部时，scrollTop还没达到计算值。这种情况需要减去固定元素的高度：

$(window).scroll(function () {
  // 假设底部固定栏的类是fixed-footer，获取它的实际高度
  const fixedFooterHeight = $('.fixed-footer').outerHeight();
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = document.documentElement.clientHeight;

  // 计算时减去固定栏的高度
  if (scrollTop >= documentHeight - windowHeight - fixedFooterHeight - 10) {
    console.log("infinite scroll works");
  }
});

5. 防抖优化（可选） #

滚动事件会频繁触发，加上防抖可以避免多次执行加载逻辑，在小屏设备上还能提升性能：

let isLoading = false; // 防止重复触发加载
const debounceScroll = _.debounce(function() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = document.documentElement.clientHeight;

  if (scrollTop >= documentHeight - windowHeight - 10 && !isLoading) {
    isLoading = true;
    console.log("infinite scroll works");
    // 这里执行你的加载逻辑，加载完成后记得把isLoading设为false
    // setTimeout(() => isLoading = false, 1000);
  }
}, 100); // 100ms的防抖延迟，平衡响应速度和性能

$(window).on('scroll touchmove', debounceScroll);

你可以先从第1、2点开始测试，这两个是小屏无限滚动失效最常见的原因，大概率能解决你的问题。

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