页面刷新且浏览器保留滚动位置时，如何正确执行onscroll事件函数？

浏览器刷新后会自动恢复之前的滚动位置，但这个动作发生在你绑定scroll事件之前，所以你的滚动处理逻辑不会被触发，导致页面初始化时的状态（比如scrolled、addBg类）没有同步。

显式调用一次处理逻辑是可行的，而且更优的做法是把滚动处理的核心逻辑抽成独立函数，这样既可以绑定到scroll事件，又能在初始化时直接调用，避免代码重复。

修改后的代码示例：

function handleHomeScroll() {
    let y = window.scrollY;
    let intersect = document.querySelector('.mainNavigation').getBoundingClientRect().bottom;
    let position = document.querySelector('.home--slider').scrollHeight - window.pageYOffset;
    y >= 100 ? document.body.classList.add('scrolled') : document.body.classList.remove('scrolled');
    position <= intersect ? document.body.classList.add('addBg') : document.body.classList.remove('addBg');
}

function homeSliderAnimation(){
    if(document.body.classList.contains('home')){
        // 初始化时先执行一次，同步状态
        handleHomeScroll();
        // 绑定滚动事件
        window.addEventListener('scroll', handleHomeScroll);
    }
}

homeSliderAnimation();

这样做的好处：

• 直接解决了刷新后滚动位置恢复但状态未更新的问题
• 核心逻辑独立，后续修改只需改一处，维护更方便
• 避免了原代码中每次绑定事件都创建新函数的冗余

如果担心频繁触发scroll事件影响性能，还可以给处理函数加防抖优化：

function debounce(func, delay = 100) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, arguments), delay);
    };
}

// 使用防抖后的函数绑定事件
const debouncedScrollHandler = debounce(handleHomeScroll);
window.addEventListener('scroll', debouncedScrollHandler);

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