原因：vue js document.documentElement.scrollTop获取一直为0的解决方法，vue封装组件后，常常是在组件里面继续轮滑，而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度，所有一直是0。

解决方法：通过 var scrollTop = document.querySelector("类名选择器").scrollTop;

获取当前组件轮滑的高度。

应用场景如：element 组件el-tabs，下拉到底部时调用接口获取更多新的数据

 组件全部的代码（接口是封装好的这里不给予展示，后面有重点代码段）

<template>
  <div class="Forum_box">
    <el-tabs
      v-model="tab"
      @tab-click="tabChanged()"
      class="eltabs"
      ref="tabBox"
    >
      <el-tab-pane label="全部" name="all">
        <Content :list="list" />
        <span></span>
      </el-tab-pane>
      <el-tab-pane label="精华" name="good">
        <Content :list="list" />
      </el-tab-pane>
      <el-tab-pane label="分享" name="share">
        <Content :list="list" />
      </el-tab-pane>
      <el-tab-pane label="问答" name="ask">
        <Content :list="list" />
      </el-tab-pane>
      <el-tab-pane label="招聘" name="job">
        <Content :list="list" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { getTopics } from "@/utils/api";
import Content from "@/components/Forum/Content.vue";
export default {
  components: {
    Content,
  },
  data() {
    return {
      page: 1,
      limit: 20,
      tab: "all",
      list: [],
      listStore: [],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollMethod, true);
  },
  /**
   * 一般此钩子下面调用接口获取数据
   */
  created() {
    this.getTopics();
  },

  methods: {
    //获取接口
    getTopics() {
      getTopics({
        page: this.page,
        limit: this.limit,
        tab: this.tab,
      }).then((res) => {
        this.list = res.data;
        this.listStore[this.tab] = {
          limit: this.limit,
          data: this.list,
        };
        this.limit = this.limit + 10;
      });
    },
    //切换tab事件
    tabChanged() {
      if (!this.listStore.hasOwnProperty(this.tab)) {
        getTopics({
          page: this.page,
          limit: this.limit,
          tab: this.tab,
        }).then((res) => {
          this.listStore[this.tab] = {
            limit: this.limit,
            data: res.data,
          };
          // console.log(this.listStore);
          this.list = this.listStore[this.tab].data;
          this.limit = this.limit + 10;
          this.isscroll = true;
        });
      } else {
        this.list = this.listStore[this.tab].data;
      }
    },
    /**
     * 滚动函数，判断当前滚动条是否到了底部来决定是否重新拉取数据
     */
    scrollMethod() {
      var scrollTop = document.querySelector(".eltabs").scrollTop;
      // console.log(this.$refs.tabBox.$el.scrollTop)
      let clientHeight = document.querySelector(".eltabs").clientHeight;
      var scrollview = document.querySelector('.eltabs').scrollHeight;
      console.log(scrollTop,"scrollTop");
      console.log(clientHeight,"clientHeight");
      console.log(scrollview,"scrollview");
      if (scrollTop + clientHeight >= scrollview) {
        this.getTopics();
        this.limit = this.limit + 10;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Forum_box {
  background-color: white;
}
.eltabs {
  height: 900px;
  overflow: scroll;
}
</style>

重点代码：

  /**
     * 滚动函数，判断当前滚动条是否到了底部来决定是否重新拉取数据
     */
    scrollMethod() {
      var scrollTop = document.querySelector(".eltabs").scrollTop;
      // console.log(this.$refs.tabBox.$el.scrollTop)
      let clientHeight = document.querySelector(".eltabs").clientHeight;
      var scrollview = document.querySelector('.eltabs').scrollHeight;
      console.log(scrollTop,"scrollTop");
      console.log(clientHeight,"clientHeight");
      console.log(scrollview,"scrollview");
      if (scrollTop + clientHeight >= scrollview) {
        this.getTopics();  //封装好获取数据的接口
        this.limit = this.limit + 10;
      }
    },