typescript - 为什么即使我能够获得对我试图滚动到的元素的引用，scrollIntoView 在 Vue 3 中也不起作用

Question

我有一个 Vue 3 组件，我正在尝试将其设置为单页应用程序的导航。当用户单击一个项目时，我希望页面滚动到包含该部分内容的元素。

奇怪的是，我可以使用document.querySelector. 我可以将 div 记录到控制台，但是当我尝试在 div 上调用 scrollIntoView 时，它不会做任何事情，除非我将它包装element.scrollIntoView在一个setTimeout函数中。

我确定这与 Vue 组件生命周期有关。我尝试将我的代码包装在onMounted函数中，这只会使我的scrollPageTo函数超出范围。

<template>
    <div id="navigation-view" class="navigation-bar bg-gradient-to-tr w-full mx-auto flex items-start py-4">
        <div class="w-full mx-auto text-right">
                <nav>
                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('home-view')">
                        <i class="fa fa-home fa-lg"></i> Home
                    </a>

                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('hello-view')">
                        <i class="fa fa-hands-helping fa-lg"></i> Hello
                    </a>

                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('contact-view')">
                        <i class="fa fa-envelope fa-lg"></i> Contact
                    </a>
                </nav>
        </div>
    </div>
    <div class="logo">
        <img src="/assets/img/615io-logo-wbg.png" alt="615io logo">
    </div>
</template>
<script lang="ts">
import {defineComponent, onMounted} from "vue";
export default defineComponent({
    setup() {

        const scrollPageTo = (navEl) => {
            console.log(`#${navEl}`);
            let element = document.querySelector(`#${navEl}`);
            console.log(element);
            element.scrollIntoView({behavior: 'smooth'});
        }

        return {
            scrollPageTo,
        }


    }
});
</script>

标签： typescriptvue.jsvue-componentvuejs3

Answer 1

将prevent修饰符添加到单击事件，因为此修饰符会阻止默认行为，即导航到#：

v-on:click.prevent="scrollPageTo('home-view')"

现场演示