使用jQuery检测滚动时section可见出现前端闪烁问题求助

架构老林

2026-9-30

问题原因

重复绑定scroll事件：代码里嵌套了两层$(window).scroll()监听，每触发一次外层滚动事件，就会新增一个滚动监听器，滚动次数越多，同一段逻辑执行次数越多，导致状态判断和动画反复触发引发闪烁。
滚动位置计算时机错误：scrollMiddle、window_height这些变量是在外层滚动事件里计算的，内层滚动事件触发时用的是上一次滚动的旧数值，边界判断完全不准，导致元素反复在可见/不可见状态之间横跳。
元素顶部位置取值错误：用$(this).position().top获取元素相对于父级的偏移量来判断视口位置，父元素如果有定位属性的话这个值完全不符合预期，应该用$(this).offset().top获取元素相对于整个文档的顶部偏移。
动画队列冲突：stop(false,false)不会清空未执行的动画队列，也不会让当前动画立刻完成，多次触发的动画叠加执行就会出现闪烁效果。
无状态去重判断：哪怕当前section已经是可见状态，只要滚动就会反复执行加类、改背景的逻辑，多余操作也会引发界面重绘闪烁。

修复后代码

jQuery( document ).ready(function($) {
    // 封装可见性判断逻辑，可复用
    function checkSectionVisibility() {
        var window_height = $(window).height(); 
        // 每次滚动都重新计算最新的视口中线位置
        var scrollMiddle = $(window).scrollTop() + (window_height/2);

        $(".fading-section").each(function() {
            var $section = $(this);
            var objectBottom = $section.offset().top + $section.outerHeight();
            // 改为取相对于整个文档的顶部偏移，判断更准确
            var objectTop = $section.offset().top;
            var section_bg = $section.find(".uagb-section__overlay").css("background-color");
            // 先读取当前状态，只有状态变化时才执行后续操作
            var isCurrentlyVisible = $section.hasClass('visible-section');
            var shouldBeVisible = scrollMiddle >= objectTop && scrollMiddle <= objectBottom;

            if (shouldBeVisible && !isCurrentlyVisible) { 
                // 清空动画队列并直接完成当前动画，避免叠加冲突
                $("body.page-id-2899").stop(true,true).animate({ backgroundColor: section_bg}, 750);
                $section.addClass('visible-section').removeClass('notvisible-section');
            } else if (!shouldBeVisible && isCurrentlyVisible) {
                $section.removeClass('visible-section').addClass('notvisible-section');
            }
        });
    }

    // 全局仅绑定一次滚动监听
    $(window).scroll(checkSectionVisibility);
    // 页面加载时主动执行一次，初始化初始状态
    checkSectionVisibility();
});

修改点说明

删除了嵌套的滚动监听逻辑，全局仅绑定一次滚动事件，避免重复执行逻辑
所有位置相关变量都移到滚动事件内部计算，每次滚动都取最新值保证边界判断准确
元素顶部偏移取值改为offset().top，适配所有布局场景的位置判断
新增状态比对逻辑，只有section可见状态发生变化时才执行类修改、背景动画操作，减少不必要的界面重绘
调整动画stop参数为stop(true, true)，清空未执行的动画队列并立刻完成当前动画，避免动画叠加引发的闪烁
补充页面加载初始化执行逻辑，避免刚进入页面时符合可见条件的section没有正确添加对应类

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