如何使用JavaScript同时实现X轴与Y轴的双向平滑滚动

问题根因 #

你当前分别对scrollLeft和scrollTop先后赋值的写法，会让浏览器将两次操作识别为两次独立的滚动任务，后触发的滚动会直接中断前一次的平滑过渡动画，因此双向滚动时会出现只有单方向生效、甚至完全失效的问题。你用setTimeout延迟赋值的方案本质是错开两次滚动的执行时间，避免动画被打断，但会导致两个方向的滚动先后执行，过渡效果生硬不连贯。

解决方案 #

方案1：用scrollTo API 一次性设置双轴滚动参数

保留你原有的边界计算逻辑，先计算出最终需要滚动的X、Y轴偏移量，再一次性调用scrollTo方法触发双轴同步平滑滚动，完全匹配你原有滚动规则：

let grid = document.querySelector('#grid');

document.addEventListener('click', function (e) {
    if (e.target.classList.contains('cell')) {
        // 原有单元格/网格边界获取逻辑保留
        let finalScrollLeft = grid.scrollLeft;
        let finalScrollTop = grid.scrollTop;
        const halfCellWidth = e.target.offsetWidth / 2;
        const halfCellHeight = e.target.offsetHeight / 2;

        if (cellRightBound > gridRightBound) {
            let scroll = cellRightBound - gridRightBound + halfCellWidth;
            finalScrollLeft += scroll;
        } else if (cellLeftBound < gridLeftBound) {
            let scroll = gridLeftBound - cellLeftBound + halfCellWidth;
            if (scroll > 0) finalScrollLeft -= scroll;
        }

        if (cellBottomBound > gridBottomBound) {
            let scroll = cellBottomBound - gridBottomBound + halfCellHeight;
            finalScrollTop += scroll;
        } else if (cellTopBound < gridTopBound) {
            let scroll = gridTopBound - cellTopBound + halfCellHeight;
            if (scroll > 0) finalScrollTop -= scroll;
        }

        // 一次性触发双轴平滑滚动
        grid.scrollTo({
            left: finalScrollLeft,
            top: finalScrollTop,
            behavior: 'smooth'
        })
    }
});

方案2：用scrollIntoView API 省略边界计算

不需要手动计算边界偏移，直接调用目标单元格的scrollIntoView方法，浏览器会自动处理父元素的双轴滚动逻辑，代码更简洁：

document.addEventListener('click', function (e) {
    if (e.target.classList.contains('cell')) {
        e.target.scrollIntoView({
            behavior: 'smooth',
            block: 'center', // 纵向对齐规则，可选值：start/end/center/nearest
            inline: 'center' // 横向对齐规则，可选值：start/end/center/nearest
        })
    }
});

可以根据实际展示需求调整block和inline的参数，即可实现子元素靠边、居中展示等不同效果。

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