jQuery Scroll事件检测页面底部实现无限滚动Chrome环境下失效问题咨询

• 底部触发条件过于严格：当前用==严格判断滚动偏移+视口高度等于文档高度，高DPI屏幕、平滑滚动特性下，scrollTop会返回浮点数值，很难刚好匹配到完全相等的情况，这是不同设备表现不一致的核心原因。调整窗口大小能触发是因为resize操作会强制浏览器重新计算布局，修正了之前缓存的高度值。
• 缺少请求状态锁：滚动事件触发频率极高，当前逻辑没有限制请求并发，可能出现上一批内容还没插入DOM，start就已经提前累加，后续高度计算错位的问题。
• 异步插入内容的高度计算延迟：showVideo插入的视频元素如果包含未加载的封面图、视频资源，插入DOM后不会立刻撑开高度，$(document).height()读取到的是资源加载前的旧高度，等资源加载完成高度更新后，之前的滚动判断已经失效。
• iOS判断逻辑冗余且易出错：当前或条件的优先级问题可能导致iOS设备的判断逻辑没有正常生效。

直接替换原有代码为以下版本即可：

let start = 0; // 请根据实际业务初始化start的初始值
const limit = 20;
let isLoading = false; // 请求锁，防止重复请求
const deviceAgent = navigator.userAgent.toLowerCase();
const isIOS = deviceAgent.match(/(iphone|ipod|ipad)/);
// 阈值统一设为200，不管什么设备都提前200px触发加载，避免刚好到底部才触发的体验问题
const LOAD_THRESHOLD = 200;

// 用on代替废弃的bind，给滚动事件加节流，300ms最多触发一次判断
$(window).on("scroll", throttle(function() {
    // 如果正在加载中，直接返回不重复判断
    if (isLoading) return;
    
    const scrollTop = $(window).scrollTop();
    const windowHeight = $(window).height();
    const docHeight = $(document).height();
    
    // 把严格等于改成大于等于，统一加上阈值，不用分设备写两套逻辑
    if (scrollTop + windowHeight + LOAD_THRESHOLD >= docHeight) {
        load($("#search").val(), start, limit);
        start += limit;
        console.log("End of page detected");
    }
}, 300));

// 节流函数，减少滚动事件触发频率，降低性能消耗
function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastCall < delay) return;
        lastCall = now;
        func.apply(this, args);
    }
}

function load(search, start=0, limit=20) {
    isLoading = true; // 加锁，避免重复触发请求
    $("#loader_active").show();

    const form_data = new FormData();
    form_data.append('search', search);
    form_data.append('start', start);
    form_data.append('limit', limit);

    $.ajax({
        url: "http://website.com/ajax/videos.php",
        contentType: false,
        dataType: "json",
        processData: false,
        cache: false,
        data: form_data,
        type: 'POST',
        success: function (data) {
            $(data).each(function(index, value) {
                showVideo(value);
            });
            $("#loader_active").hide();
            isLoading = false; // 请求完成解锁
        },
        error: function() {
            // 请求失败也要解锁，避免卡死之后再也无法触发加载
            $("#loader_active").hide();
            isLoading = false;
        }
    })
}

如果插入的视频卡片包含图片资源，建议给图片设置固定宽高比的占位容器，避免图片加载过程中高度变化导致的计算偏差，进一步提升触发准确率。

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