Chrome中scrollIntoView平滑滚动因滚动条消失或滚动惯性突然中断

针对你遇到的Chrome浏览器中scrollIntoView({behavior: 'smooth'})在手动滚动后（滚动条未淡出或仍有滚动惯性）被中断的问题，除了强制显示滚动条外，还有以下几种可行方案：

1. 等待滚动状态稳定后执行平滑滚动 #

核心思路是让浏览器的手动滚动（或惯性滚动）完全结束后，再触发程序控制的平滑滚动，避免两者的动画冲突。通过设置延迟定时器，适配Chrome滚动条淡出和移动端惯性滚动的结束时长：

let scrollTimer;

function smoothScrollTo(targetElement) {
    // 清除之前的定时器，避免重复触发
    clearTimeout(scrollTimer);
    // 设置300ms延迟，覆盖滚动条淡出和惯性滚动的收尾时长
    scrollTimer = setTimeout(() => {
        targetElement.scrollIntoView({ behavior: 'smooth' });
    }, 300);
}

// 绑定按钮点击事件
document.querySelector('.your-scroll-button').addEventListener('click', () => {
    const target = document.getElementById('your-target-element');
    smoothScrollTo(target);
});

2. 使用自定义平滑滚动替代原生API #

放弃原生scrollIntoView，基于requestAnimationFrame实现自定义滚动动画，完全掌控滚动过程，不受浏览器原生滚动行为的干扰，还能自定义缓动效果：

function smoothScrollTo(target) {
    const targetTop = target.getBoundingClientRect().top + window.pageYOffset;
    const startTop = window.pageYOffset;
    const distance = targetTop - startTop;
    const duration = 800; // 可自定义滚动时长
    let startTime = null;

    // 缓动函数，实现自然的ease-in-out滚动效果
    const easeInOut = progress => progress < 0.5 
        ? 2 * progress * progress 
        : 1 - Math.pow(-2 * progress + 2, 2) / 2;

    function animateScroll(currentTime) {
        if (!startTime) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const progress = Math.min(timeElapsed / duration, 1);
        const easedProgress = easeInOut(progress);

        window.scrollTo(0, startTop + distance * easedProgress);

        if (timeElapsed < duration) {
            requestAnimationFrame(animateScroll);
        }
    }

    requestAnimationFrame(animateScroll);
}

// 绑定按钮点击事件
document.querySelector('.your-scroll-button').addEventListener('click', () => {
    const target = document.getElementById('your-target-element');
    smoothScrollTo(target);
});

3. 分端针对性适配 #

针对桌面端和移动端的不同问题场景，分别处理：

• 移动端：先强制停止当前滚动惯性，再执行平滑滚动
• 桌面端：等待滚动条淡出后再触发滚动

// 判断是否为移动设备
function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

function smoothScrollTo(targetElement) {
    if (isMobileDevice()) {
        // 移动端：强制停止当前滚动，消除惯性
        window.scrollTo(window.pageXOffset, window.pageYOffset);
        // 短延迟后执行滚动
        setTimeout(() => {
            targetElement.scrollIntoView({ behavior: 'smooth' });
        }, 100);
    } else {
        // 桌面端：等待滚动条淡出（约300ms）
        setTimeout(() => {
            targetElement.scrollIntoView({ behavior: 'smooth' });
        }, 300);
    }
}

// 绑定按钮点击事件
document.querySelector('.your-scroll-button').addEventListener('click', () => {
    const target = document.getElementById('your-target-element');
    smoothScrollTo(target);
});

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