ElScrollbar平滑滚动的实现

背景

在使用 setScrollTop 或者 setScrollLeft 方法时，滚动条会立即跳转到目标位置，这种突然的变化可能会影响用户体验。为了解决这个问题，我们可以通过CSS中的 scroll-behavior: smooth; 属性来实现平滑滚动。

那么，如何为 ElScrollbar 组件设置平滑滚动呢？本文将详细讲解实现步骤。

实现步骤

1. 获取 ElScrollbar 组件的引用：我们首先需要获取 ElScrollbar 组件的 ref，以便后续操作。

2. 定位滚动容器：通过 ref 获取到组件实例的 $el 属性，这实际上是滚动条的容器元素。

3. 设置平滑滚动样式：使用类选择器找到 .el-scrollbar__wrap 元素，并将其 scroll-behavior 样式设置为 smooth，实现平滑滚动效果。

代码实现

<template>
  <el-scrollbar ref="scrollbarRef">
    <div class="scrollbar-demo-item" v-for="item in 20" :key="item">{{ item }}</div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElScrollbar } from 'element-plus'

const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()

onMounted(() => {
  const scrollbarWrap = scrollbarRef.value?.$el.querySelector('.el-scrollbar__wrap')
  scrollbarWrap?.style.scrollBehavior = 'smooth'
})
</script>

在以上代码中，我们通过 onMounted 生命周期钩子获取到 .el-scrollbar__wrap 节点，并为其应用平滑滚动的样式。这样，当你使用 setScrollTop 或 setScrollLeft 方法时，滚动条将会平滑地滚动到目标位置，为用户提供更好的视觉体验。