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等講解