vue滚动条始终悬浮在页面最下方

需求

表格宽高都超出浏览器显示大小，横向滚动条需要始终浮在最下方便于滚动展示数据

思路

在表格下方添加一个滚动条容器，并且采用position: fixed定位始终浮在页面下方。
在通过滚动事件绑定该容器与表格的横向滚动同步。
在表格内容小于浏览器显示高度时，只展示表格滚动条。

实现

<div class="tab-table" id="tabTable" @scroll="sysHandleScroll()" @mouseover="changeFlag(false)">
	<div>table</div>
    <!--      滚动条-->
	<div
      v-show="tableHeight >= clientHeight"
      class="table-scrool"
      id="externalForm"
      @scroll="handleScroll()"
      @mouseover="changeFlag(true)"
      :style="{ width: `${screenWidth + 'px'}` }"
    >
    	<div :style="{ width: `${listWidth + 'px'}` }" style="height: 5px"></div>
    </div>
</div>

<script>
  export default {
    data() {
      return {
        screenWidth: 0,
        listWidth: 0,
        flag: false,
        clientHeight: 0,
        tableHeight: 0,
      };
    },
    mounted() {
      this.setSize();
      window.addEventListener('resize', this.setSize, false);
      this.$nextTick(() => {
        this.clientHeight = document.documentElement.clientHeight;
        this.tableHeight = document.getElementById('tabTable').clientHeight;
      });
    },
    beforeUnmount() {
      window.removeEventListener('resize', this.setSize, false);
    },
    methods: {
      setSize: function () {
        this.screenWidth = document.getElementById('tabTable').offsetWidth;
        this.listWidth = 0;
        this.listHeader.list.forEach((item) => {
            this.listWidth = this.listWidth + item.length * 10;
        });
        if (this.listWidth < this.screenWidth) {
          this.listWidth = this.screenWidth;
        }
      },
      changeFlag(flag) {
        this.flag = flag;
      },
      // 左右滚动条滚动同步
      sysHandleScroll() {
        if (!this.flag) {
          document.getElementById('externalForm').scrollLeft =
            document.getElementById('tabTable').scrollLeft;
        }
      },
      handleScroll() {
        document.getElementById('tabTable').scrollLeft =
          document.getElementById('externalForm').scrollLeft;
      },
    },
  };
</script>

.tab-table {
	 margin: 0 16px 15px 16px;
	 overflow-x: auto;
	 white-space: nowrap;
}
.table-scrool{
	height: 5px;
	position: fixed;
	bottom: 0;
	overflow-x: auto;
	overflow-y: hidden;
	z-index: 12;
}