Element Plus 中 el-anchor 滚动动画失效问题解析

Element Plus 中 el-anchor 滚动动画失效问题解析

【免费下载链接】element-plus element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库，提供了丰富且易于使用的 UI 组件，用于快速搭建企业级桌面和移动端的前端应用。 项目地址: https://gitcode.com/GitHub_Trending/el/element-plus

问题背景

在使用 Element Plus 的 el-anchor 组件时，开发者可能会遇到一个常见问题：虽然设置了 duration 属性，但点击锚点链接时页面滚动没有动画效果，而是直接跳转到目标位置。这种情况通常发生在与 el-scrollbar 组件配合使用时。

问题根源

经过分析，这个问题的主要原因是容器引用设置不当。el-anchor 组件的 container 属性需要指向实际的滚动容器元素，而不是直接引用 el-scrollbar 组件实例。

解决方案

方法一：通过 DOM 查询获取容器

可以通过 nextTick 获取 el-scrollbar 内部的实际滚动容器：

const scrollContainer = ref(null)
const contentScrollRef = ref(null)

nextTick(() => {
  scrollContainer.value = contentScrollRef.value?.$el.querySelector('.el-scrollbar__wrap')
})

然后在模板中将这个容器引用传递给 el-anchor：

<el-anchor :container="scrollContainer" direction="vertical" :duration="1000">
  <!-- 锚点链接 -->
</el-anchor>
<el-scrollbar ref="contentScrollRef">
  <!-- 内容区域 -->
</el-scrollbar>

方法二：利用 el-scrollbar 的 wrapRef

更优雅的方式是直接使用 el-scrollbar 组件暴露的 wrapRef 属性：

import type { ScrollbarInstance } from 'element-plus'

const contentScrollRef = ref<ScrollbarInstance | null>(null)

然后在模板中：

<el-anchor :container="contentScrollRef?.wrapRef" direction="vertical" :duration="1000">
  <!-- 锚点链接 -->
</el-anchor>
<el-scrollbar ref="contentScrollRef">
  <!-- 内容区域 -->
</el-scrollbar>

实现原理

Element Plus 的 el-anchor 组件内部使用 scrollTo 方法实现平滑滚动效果。当指定了正确的滚动容器后，组件会：

1. 计算目标位置与当前位置的偏移量
2. 根据 duration 属性设置的时间，将滚动过程分成多个小步骤
3. 使用 requestAnimationFrame 实现平滑的动画效果

最佳实践

1. 始终确保 container 属性指向实际的滚动容器元素
2. 对于 el-scrollbar，优先使用其 wrapRef 属性
3. 合理设置 duration 值，通常在 500-1000ms 之间效果最佳
4. 在组件挂载完成后（如 onMounted 或 nextTick）再获取容器引用

总结

通过正确设置滚动容器引用，可以充分发挥 el-anchor 组件的平滑滚动功能。理解 Element Plus 组件间的协作方式，能够帮助开发者更高效地构建具有良好用户体验的界面。对于类似的功能实现，掌握组件间的引用关系是关键所在。

【免费下载链接】element-plus element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库，提供了丰富且易于使用的 UI 组件，用于快速搭建企业级桌面和移动端的前端应用。 项目地址: https://gitcode.com/GitHub_Trending/el/element-plus