Vue 3 - 组件出现时始终滚动到页面上的特定位置答案

【问题标题】：Vue 3 - Always scroll to specific position on page when component appearsVue 3 - 组件出现时始终滚动到页面上的特定位置
【发布时间】：2021-06-22 03:50:05
【问题描述】：

我有一个基本的表单组件，一旦我单击按钮就会显示（不使用路由器）。一旦表单出现，我希望表单的滚动位置向下滚动一点（例如 y 轴为 40），但我不完全确定如何实现这一点。有很多关于这个的例子，但我无法让它们中的任何一个工作。请问有人可以为此提供解决方案吗？我也开始使用 vue 3。

<template>
    <div class="appointment-wrapper" :class="[showForm ? 'appointment' : 'appointment-success']">
        // Scroll down to a certain point
        // ....
            <form @submit.prevent="validateForm" novalidate>
            // ....
            </form>
        </div>
    </div>
</template>

【问题讨论】：

观察者（vuejs.org/v2/guide/computed.html#Watchers）如何等待更改，然后使用表单上的引用（vuejs.org/v2/guide/…）将其滚动到视图中（developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView）

标签： javascript html vue.js vuejs3

【解决方案1】：

如果您点击按钮后条件为真，您可以使用window.scrollTo(0, 40)。

Vue.createApp({
  data() {
    return {
      showForm: true
    }
  },
  mounted() {
     if (this.showForm) window.scrollTo(0, 400) // only demo value - use 40
  }
}).mount('#options-api')

#options-api {
  height: 1000px;
}

<script src="https://unpkg.com/vue@next"></script>
<div id="options-api">
  <h1>hidden title</h1>
</div>

【讨论】：

【解决方案2】：

如果需要滚动到某个元素位置

document.getElementById(el).scrollIntoView();

或者如果您需要按轴滚动

window.scrollTo(0, 1000)

【讨论】：