如何使用 Vue.js 滚动到特定元素
原创
以下是关于如何在Vue组件中使用模板引用实现滚动到特定部分/元素的指南。这些说明清晰而简洁地展示了如何利用模板引用引用页面中的特定部分/元素，然后创建函数来实现对该元素的平滑滚动。
1 - 创建一个组件模板并为其添加ref属性：
<template>
<main>
<section ref="sectionRefEl">
<some-component>element</some-component>
</section>
</main>
</template>2 - 创建脚本部分并声明您的ref：
<script setup lang="ts">
import { ref } from 'vue'
// 这里是我们的模板引用，类型为HTMLElement或null
const sectionRefEl = ref<HTMLElement | null>(null)
</script>3 - 创建一个函数来执行滚动操作：
<script setup lang="ts">
import { ref } from 'vue'
// 这里是我们的模板引用，类型为HTMLElement或null
const sectionRefEl = ref<HTMLElement | null>(null)
// 使用scrollIntoView()函数实现滚动
function scrollTo(view: Ref<HTMLElement | null>) {
view.value?.scrollIntoView({ behavior: 'smooth' })
}
</script>scrollTo函数接受一个ref参数，并使用DOM API函数scrollIntoView()实现滚动。
了解更多关于scrollIntoView()函数的信息。
4 - 现在您只需要在任何需要的地方调用该函数，传递一个ref作为参数，即可观察到滚动效果。
例如，您可以创建一个触发该方法的按钮：
<template>
<main>
<section ref="sectionRefEl">
<some-component>element</some-component>
</section>
<button @click="scrollTo(sectionRefEl)">滚动到</button>
</main>
</template>我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
