Chrome中ScrollIntoView()函数失效，其他浏览器正常的问题求助

Chrome 中使用 scrollIntoView({behavior: "smooth"}) 连续触发滚动时，会因为浏览器的滚动动画队列机制，忽略后续的滚动请求。尽管 scrollnum 变量正常更新，但后续的滚动指令被浏览器拦截，导致仅首次点击有效。另外也需要确保每次目标滚动元素确实存在，避免因元素不存在中断代码执行。

1. 增加滚动状态锁，避免连续触发冲突 #

添加状态变量标记当前是否正在执行滚动动画，防止短时间内多次点击的滚动请求被浏览器忽略。

2. 校验目标元素存在性 #

每次获取元素后进行校验，避免因元素不存在导致后续逻辑无法执行。

3. 可选：改用 window.scrollTo 替代元素 scrollIntoView #

部分场景下，window.scrollTo 的平滑滚动在 Chrome 中表现更稳定。

document.addEventListener("DOMContentLoaded", function () {
    const scroll_button = document.getElementById("scroll_button");
    let scrollnum = 4;
    let isScrolling = false; // 标记滚动状态

    function scrollFunction() {
        // 正在滚动时直接返回，避免冲突
        if (isScrolling) return;
        
        console.log(scrollnum);
        const product = document.getElementById(scrollnum);
        
        // 检查目标元素是否存在
        if (!product) {
            console.warn(`无法找到ID为${scrollnum}的元素`);
            return;
        }

        isScrolling = true;
        // 执行平滑滚动
        product.scrollIntoView({
            behavior: "smooth",
            block: "start"
        });

        // 滚动动画完成后重置状态（可根据实际动画时长调整延迟）
        setTimeout(() => {
            isScrolling = false;
        }, 800);

        scrollnum += 2;
    }

    if (scroll_button) {
        scroll_button.addEventListener("click", scrollFunction);
    }
});

替代方案（使用 window.scrollTo） #

如果上述方案仍有问题，可尝试改用 window.scrollTo 实现平滑滚动：

// 在 scrollFunction 中替换 scrollIntoView 部分代码
const rect = product.getBoundingClientRect();
window.scrollTo({
    top: window.pageYOffset + rect.top,
    left: window.pageXOffset + rect.left,
    behavior: 'smooth'
});

• 避免使用纯数字作为元素 ID，虽然 HTML5 允许，但部分场景可能存在潜在兼容性问题，建议给 ID 添加前缀（如 product-${scrollnum}），同时对应修改 JS 中的元素获取逻辑。
• 如果需要更精确的滚动结束监听，可以结合 scroll 事件与防抖函数判断滚动是否停止，替代固定延迟时间的方式。

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