vue3滚动到指定位置加载动画

你可以通过监听滚动事件来实现这个效果。具体步骤如下：

1. 在需要滚动的元素上监听滚动事件，可以使用 `@scroll` 或者 `addEventListener('scroll')`。

2. 在滚动事件中获取当前滚动的位置，可以使用 `element.scrollTop` 或者 `window.scrollY`。

3. 判断当前滚动的位置是否达到需要加载的位置，如果达到则触发加载动画。

4. 在加载完成后，可以使用 `element.scrollIntoView()` 将元素滚动到可视区域。

下面是一个示例代码：

<template>
  <div class="container" @scroll="handleScroll">
    <div class="item" v-for="item in items" :key="item.id">
      {{ item.content }}
    </div>
    <div class="loading" v-if="loading">
      加载中...
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      targetOffset: 1000 // 目标滚动位置
    }
  },
  mounted() {
    // 初始化数据
    this.items = [
      { id: 1, content: 'item 1' },
      { id: 2, content: 'item 2' },
      { id: 3, content: 'item 3' },
      // ...
      { id: 100, content: 'item 100' }
    ]
  },
  methods: {
    async handleScroll() {
      const container = this.$refs.container
      const containerHeight = container.offsetHeight
      const scrollTop = container.scrollTop
      const scrollHeight = container.scrollHeight

      // 判断是否到达目标位置
      if (scrollHeight - scrollTop - containerHeight < this.targetOffset) {
        this.loading = true
        // 模拟异步加载数据
        await new Promise(resolve => setTimeout(resolve, 1000))
        // 添加新的数据
        this.items.push(
          { id: this.items.length + 1, content: `item ${this.items.length + 1}` }
        )
        this.loading = false
        // 滚动到新的元素
        const newElement = this.$el.querySelector('.item:last-child')
        newElement.scrollIntoView()
      }
    }
  }
}
</script>

这个示例使用了一个容器元素来实现滚动，你可以根据实际情况进行调整。在滚动到指定位置后，我们添加了一个加载动画，并且使用 `scrollIntoView()` 方法将新的元素滚动到可视区域。