如何在Vue3中实现JavaScript scrollLeft水平平滑滚动？

失效原因 #

你之前的方案无法生效主要是两个问题导致的：

• scroll-behavior: smooth设置在html元素上仅作用于页面全局滚动条，你项目中的横向滚动是独立的.artwork-container容器触发的，需要给该容器单独设置该属性才会生效
• 直接修改DOM的scrollLeft属性在多数浏览器中不会触发平滑滚动规则，改用标准的scrollToAPI指定平滑参数可以实现全兼容的平滑效果，不需要额外引入第三方滚动库。

具体修改步骤 #

1. 新增滚动容器样式 #

给.artwork-container添加滚动相关配置：

.artwork-container {
  /* 原有样式保留，新增以下内容 */
  overflow-x: auto;
  scroll-behavior: smooth;
  /* 可选配置：隐藏滚动条，不影响滚动功能 */
  scrollbar-width: none; /* 火狐兼容 */
}
/* 谷歌/Edge兼容隐藏滚动条 */
.artwork-container::-webkit-scrollbar {
  display: none;
}

2. 修改滚动事件逻辑 #

替换原有直接修改scrollLeft的写法，使用scrollToAPI：

<script setup>
const scrollLeft = () => {
  const container = document.querySelector('.artwork-container')
  container.scrollTo({
    left: container.scrollLeft - 500,
    behavior: 'smooth'
  })
}
const scrollRight = () => {
  const container = document.querySelector('.artwork-container')
  container.scrollTo({
    left: container.scrollLeft + 500,
    behavior: 'smooth'
  })
}
</script>

可选优化：可以动态获取单张图片的宽度替换固定的500滚动距离，避免滚动后出现图片被截断的问题。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov