vue 滚动条 居中

在Vue中实现滚动条居中通常涉及到监听目标元素的滚动事件，并动态调整滚动位置以使得内容居中。这可以通过Vue的响应式数据和事件处理功能实现。以下是一个简单的实现方法：

1. 在Vue组件中使用`mounted`生命周期钩子来获取目标元素，并监听滚动事件。
2. 在滚动事件的处理函数中，根据目标元素的当前滚动位置以及元素的尺寸计算应该滚动到的位置，使得特定的子元素居中显示。
3. 通过修改目标元素的`scrollTop`或`scrollLeft`属性来滚动到计算出的位置。

下面是一个简单的代码示例：

<template>
  <div class="outer" @scroll="onScroll">
    <div class="inner">内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outer: null
    };
  },
  mounted() {
    this.outer = this.$refs.outer;
    this.outer.addEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll() {
      const outer = this.outer;
      const inner = outer.querySelector('.inner');
      const top = outer.scrollTop;
      const outerHeight = outer.clientHeight;
      const innerHeight = inner.offsetHeight;

      if (top + outerHeight / 2 < innerHeight / 2) {
        outer.scrollTop = innerHeight / 2 - outerHeight / 2;
      } else if (top + outerHeight / 2 > innerHeight / 2) {
        outer.scrollTop = innerHeight / 2 - outerHeight / 2;
      }
    }
  },
  beforeDestroy() {
    this.outer.removeEventListener('scroll', this.onScroll);
  }
};
</script>

<style>
.outer {
  height: 300px;
  overflow-y: scroll;
}
.inner {
  height: 1000px;
}
</style>

在这个例子中，`.outer` 是可以滚动的容器，`.inner` 是需要居中的内容。当`.inner`内容滚动时，`onScroll`方法会计算并调整`.outer`的滚动位置，使得`.inner`内容垂直居中。