Vue监听Dom元素上滚动还是下滚动Demo，可借助实现吸顶效果。

直接上页面dmeo

<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" >
      <ul ref="msgList">
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
      </ul>
    </van-pull-refresh>
  </div>
</template>

<script>
//我这里全局使用了vant组件，所以可以直接使用下拉的效果.
//下拉组件  van-pull-refresh
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    //触顶下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    //处理消息栏的滚动
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let box = this.$refs.msgList;
      console.log("可视区域高度", box.clientHeight, "总高度", box.scrollHeight);
      console.log(
        "box.scrolltop:" + box.scrollTop + " box.offsetTop:" + box.offsetTop
      );
    }
  },

  mounted() {
    this.box = this.$refs.msgList;
    var $this = this;
    // 监听这个dom的scroll事件
    this.box.onscroll = () => {
      console.log("on scroll");
      $this.handleScroll();
    };
    console.log(this.box.onscroll);
  }
};
</script>

<style>

ul {
  border: 2px solid green;
  height: 100px;
  overflow: scroll;
}
</style>

参考资料：
上滑下滑参考

scrollTop，clientHeight等讲解