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

Posted 2023-02-23

【中文标题】为啥即使我能够获得对我试图滚动到的元素的引用，scrollIntoView 在 Vue 3 中也不起作用

【英文标题】：Why doesn't scrollIntoView work in Vue 3 even though I'm able to get a reference to the element that I'm trying to scroll to为什么即使我能够获得对我试图滚动到的元素的引用，scrollIntoView 在 Vue 3 中也不起作用

【发布时间】：2021-01-14 13:35:29

【问题描述】：

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

奇怪的是，我可以使用document.querySelector 获得对 div 的引用。我可以将 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" >
    </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>

【问题讨论】：

嗨，我也是 Vue 3 的新手，但这似乎工作正常。 jsfiddle.net/r1xbej3d

@User28 很好的例子，但是如果你使用a 而不是button，这将不起作用，但如果你添加了 prevent 修饰符，它会起作用

哦，你是对的，我没有注意到从 OP 代码中使用 a 标签。

【参考方案1】：

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

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

LIVE DEMO