欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2022-07-26 10:03:58|栏目:vue|点击:

本文实例为大家分享了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新手入门出现function () { [native code] }错误的解决方案

栏    目:vue

下一篇:没有了

本文标题:vue实现滚动条始终悬浮在页面最下方

本文地址:http://www.codeinn.net/misctech/208988.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有