vue2+ts监听滚动条

在Vue2中，可以通过监听window的scroll事件来实现滚动条的滚动监听。具体步骤如下：

1. 在组件的created钩子函数中，使用window.addEventListener方法监听scroll事件，并绑定一个回调函数。

created() {
  window.addEventListener('scroll', this.handleScroll)
},

2. 在组件的destroyed钩子函数中，使用window.removeEventListener方法移除scroll事件的监听。

destroyed() {
  window.removeEventListener('scroll', this.handleScroll)
},

3. 在回调函数handleScroll中，获取滚动条的滚动距离，并根据业务需求进行处理。

methods: {
  handleScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    // 处理业务逻辑
  }
}

完整代码如下：

<template>
  <div>
    <!-- content -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
  created() {
    window.addEventListener('scroll', this.handleScroll)
  }

  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  }

  handleScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    // 处理业务逻辑
  }
}
</script>