scrollIntoView使用

scrollIntoView是一个原生的 JavaScript 方法，用于将元素滚动到可视区域内。它可以在浏览器中平滑滚动到指定元素的位置。

scrollIntoView方法有以下几种用法：

1. 基本用法：

   element.scrollIntoView();
   

   这将使元素滚动到其所在的容器（通常是父容器）的可视区域内，如果需要滚动到可视区域的顶部，则可以使用block: 'start'选项。

2. 使用选项：

   element.scrollIntoView(options);
   

   可以通过传递选项对象来自定义滚动行为，常用选项有：

   • behavior：指定滚动行为，默认为 "auto"，可以设置为 "smooth" 实现平滑滚动。
   • block：指定垂直方向上的对齐方式，可以是 "start"、"center"、"end" 或 "nearest"。
   • inline：指定水平方向上的对齐方式，可以是 "start"、"center"、"end" 或 "nearest"。

下面是一个示例，演示如何使用scrollIntoView方法将元素滚动到可视区域内：

html

<template>
  <div>
    <div style="height: 1000px;"></div>
    <div ref="scrollElement">Scroll Element</div>
    <div style="height: 1000px;"></div>
    
    <el-button @click="scrollToElement">Scroll to Element</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToElement() {
      const element = this.$refs.scrollElement;
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  }
};
</script>

在这个示例中，我们在模板中创建了一个滚动容器，并在其中包含一个具有参考(ref)属性的div元素（Scroll Element）。我们在方法scrollToElement中使用scrollIntoView方法，将参考元素滚动到容器的可视区域内，实现平滑滚动效果。

通过点击"Scroll to Element"按钮，我们调用scrollToElement方法，它将查找参考元素($refs.scrollElement)并将其滚动到可视区域内。