vue scrollIntoView

### 如何在 Vue 中使用 `scrollIntoView` 方法

#### 使用 `scrollIntoView` 实现页面元素滚动至可视区

当希望某个特定的 DOM 元素自动进入视口范围时，可以利用 JavaScript 的原生 API——`scrollIntoView()` 来完成这一操作。此方法允许开发者控制目标元素相对于其最近的一个具有溢出（overflow）特性的祖先容器的位置。

对于 Vue 应用程序而言，在模板中的 HTML 标签上添加 `ref` 属性以便稍后可以通过组件实例访问这些元素是非常常见的做法[^3]。一旦获得了对所需节点的引用，则可以直接在其上调用 `.scrollIntoView([options])` 函数：

<template>
  <div class="container">
    <!-- 给定一个带有 ref 的 div -->
    <div ref="targetElement">这是一个要滚动到的目标</div>

    <button @click="handleScrollClick">点击这里滚动到上面的内容</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const targetElement = ref(null)

function handleScrollClick() {
  if (targetElement.value !== null && typeof(targetElement.value.scrollIntoView) === "function") {
      // 调用 scrollIntoView 并传入配置选项以实现更精细的行为调整
      const options = {
          behavior: 'smooth', // 设置为平滑过渡效果
          block: 'start'     // 将元素顶部与视窗顶部对齐
      }
      
      targetElement.value.scrollIntoView(options);
  }
}
</script>

上述代码片段展示了如何定义一个按钮事件处理器函数 `handleScrollClick` ，它会在用户单击按钮时触发，并使页面平稳地滚动直到名为 `targetElement` 的元素出现在屏幕顶端位置[^4]。

#### 参数说明

- **无参调用** 或者传递 `true`: 这种情况下会尽可能让整个元素完全显示出来；如果无法做到这一点，则至少保证部分可见。

- **仅提供布尔值**: 当设置为 `false` 时，只会尝试把元素的一部分展示给用户看而不是全部。

- **对象形式的参数 (`scrollIntoViewOptions`)**
- `behavior`: 可选字符串 `'auto'|'instant'|'smooth'` 。默认行为是立即执行滚动动作而不带任何动画效果。选择 `"smooth"` 则会产生流畅自然的效果。
- `block`: 控制垂直方向上的定位方式，默认值为 `"center"` 表示居中对齐；其他可取值有 `"start"` 和 `"end"` 分别代表靠顶和底部对齐。
- `inline`: 类似于 `block` ,但是用于水平方向上的排列规则。