el-scrollbar 的滚动事件类型

### Vue 和 Element-UI 中 `el-scrollbar` 的滚动事件

在 Vue 和 Element-UI 中，`el-scrollbar` 组件支持监听滚动事件。通过绑定自定义事件来处理这些滚动行为。

当需要捕获滚动条的位置变化时，可以利用 `scroll` 事件。此事件会在每次用户滚动内容时触发，并传递包含当前滚动位置信息的对象给回调函数[^1]。

为了实现更复杂的功能，比如检测到底部或顶部的距离，可以在方法内部访问原生 DOM 节点并读取其属性：

methods: {
    handleScroll(event) {
        const scrollWrapper = this.$refs.scrollbar.wrap_; // 获取到最外层容器
        console.log(scrollWrapper.scrollTop);             // 输出垂直方向上的偏移量
    }
}

下面是一个完整的例子展示如何设置带有滚动事件监听器的 `el-scrollbar`:

<template>
  <div class="box">
    <el-scrollbar ref="scrollbar" @scroll="handleScroll" style="height: 100%">
      <!-- 滑动栏里的内容 -->
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(/* event */) {
      let wrapper = this.$refs.scrollbar.wrap_;
      console.log('scrollTop:', wrapper.scrollTop);
      // 可在此处添加更多逻辑...
    },
  },
};
</script>