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

Jcinta ·

更新时间:2024-09-20

· 194 次阅读

本文实例为大家分享了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>

CSS

.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;
}

VUE 滚动条

1024 个赞