如何用JavaScript实现水平平滑滚动？现有代码仅跳转无过渡

问题出在两个核心点：

• scroll-behavior: smooth 被加在了<html>元素上，但实际发生滚动的是.flex容器，这个属性必须作用在实际滚动的目标元素上才会生效。
• 使用scrollTo(x, y)的坐标调用方式时，会忽略CSS的scroll-behavior设置，需要改用配置对象参数明确指定平滑行为。

方案一：CSS配置全局平滑滚动 #

给.flex容器添加scroll-behavior: smooth属性，让该容器的所有滚动操作默认启用平滑效果：

html {scroll-behavior: smooth;}
.container {
    width: 800px;
    margin: auto;
    border: 1px solid black;
    padding: 20px;
}
.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: auto;
    scrollbar-width: none;
    scroll-behavior: smooth; /* 新增该行，作用于滚动容器 */
}
.flexItem {
    height: 100px;
    width: 150px;
    min-width: 150px;
    border-radius: 5px;
    border: 1px solid red;
    background-color: #d1d1d1;
}

方案二：JS直接指定平滑行为（无需依赖CSS） #

修改scrollTo的调用方式，传入包含behavior: 'smooth'的配置对象，这种方式更灵活，无需依赖CSS属性：

document.getElementById('scrollLeft').addEventListener('click', () => {
    document.getElementsByClassName('flex')[0].scrollTo({
        left: 0,
        top: 0,
        behavior: 'smooth'
    });
});

document.getElementById('scrollRight').addEventListener('click', () => {
    const flexContainer = document.getElementsByClassName('flex')[0];
    // 修正滚动终点：总宽度减去容器可视宽度，避免滚动过度
    const scrollEnd = flexContainer.scrollWidth - flexContainer.clientWidth;
    flexContainer.scrollTo({
        left: scrollEnd,
        top: 0,
        behavior: 'smooth'
    });
});

注：原代码中滚动右侧时直接使用scrollWidth作为目标位置会导致滚动过度，减去容器的clientWidth（可视宽度）才能准确滚动到最右侧边缘。

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