使用jQuery判断Div底部或完整可见时滚动至下一个Div的问题

我明白你的需求了——你想检测指定的#myDiv是否完全出现在视口中（包括底部），一旦满足条件就自动滚动到下一个Div。咱们先拆解原代码的问题，再给出可靠的实现方案：

原代码的问题点 #

• 你错误地使用了$('#myDiv').css('height',total)，这行代码把total（元素顶部+自身高度）设置成了Div的高度，完全偏离了“检测可见性”的目的
• 依赖的visible(true)方法（如果是jQuery插件）可能只检测元素是否部分可见，不符合你“整个Div可见”的要求

核心思路 #

我们可以自己实现一个元素完全可见性检测函数，结合滚动事件监听，来触发滚动逻辑。同时还要处理两种场景：Div高度小于等于窗口高度，以及Div高度大于窗口高度的情况。

1. 实现完全可见性检测函数 #

这个函数通过原生API获取元素位置和视口信息，判断元素是否完全在视口内：

function isElementFullyVisible(element) {
    const rect = element.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    // 元素顶部未被视口顶部遮挡，且元素底部未被视口底部遮挡
    return rect.top >= 0 && rect.bottom <= windowHeight;
}

2. 滚动监听与滚动逻辑 #

监听窗口滚动事件，根据Div的高度情况分别处理：

$(window).on('scroll', function() {
    const $myDiv = $('#myDiv');
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const divHeight = $myDiv.height();
    const $nextDiv = $myDiv.next('div');

    // 如果Div高度大于窗口高度，无法完全可见，改为检测底部进入视口
    if (divHeight > windowHeight) {
        const rect = $myDiv[0].getBoundingClientRect();
        if (rect.bottom <= windowHeight && $nextDiv.length) {
            // 平滑滚动到下一个Div
            $('html, body').animate({
                scrollTop: $nextDiv.offset().top
            }, 500); // 500ms是动画时长，可按需调整
        }
    } else {
        // Div高度小于等于窗口高度，检测完全可见
        if (isElementFullyVisible($myDiv[0]) && $nextDiv.length) {
            $('html, body').animate({
                scrollTop: $nextDiv.offset().top
            }, 500);
        }
    }
});

3. 可选：避免重复触发滚动 #

为了防止滚动过程中多次触发逻辑，可以加一个锁机制：

let isScrolling = false;

$(window).on('scroll', function() {
    if (isScrolling) return;

    const $myDiv = $('#myDiv');
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const divHeight = $myDiv.height();
    const $nextDiv = $myDiv.next('div');

    if (divHeight > windowHeight) {
        const rect = $myDiv[0].getBoundingClientRect();
        if (rect.bottom <= windowHeight && $nextDiv.length) {
            isScrolling = true;
            $('html, body').animate({
                scrollTop: $nextDiv.offset().top
            }, 500, function() {
                isScrolling = false;
            });
        }
    } else {
        if (isElementFullyVisible($myDiv[0]) && $nextDiv.length) {
            isScrolling = true;
            $('html, body').animate({
                scrollTop: $nextDiv.offset().top
            }, 500, function() {
                isScrolling = false;
            });
        }
    }
});

代码说明 #

• getBoundingClientRect()：获取元素相对于视口的位置信息，是原生且可靠的API
• 平滑滚动使用animate()方法，如果不需要平滑效果，可以直接替换为$('html, body').scrollTop($nextDiv.offset().top);
• 加入isScrolling锁是为了避免滚动动画执行过程中重复触发逻辑，提升体验

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