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

 更新时间:2022年04月11日 15:08:53   作者:Cardhu丶  
这篇文章主要为大家详细介绍了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如何在vue.config.js文件中导入模块

    vue如何在vue.config.js文件中导入模块

    这篇文章主要介绍了vue如何在vue.config.js文件中导入模块问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 多个vue项目实现共用一个node-modules文件夹

    多个vue项目实现共用一个node-modules文件夹

    这篇文章主要介绍了多个vue项目实现共用一个node-modules文件夹,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中ref标签属性和$ref的关系解读

    vue中ref标签属性和$ref的关系解读

    这篇文章主要介绍了vue中ref标签属性和$ref的关系,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue3中10多种组件通讯方法小结

    Vue3中10多种组件通讯方法小结

    本文主要介绍了Vue3中10多种组件通讯方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • unplugin-auto-import与unplugin-vue-components安装问题解析

    unplugin-auto-import与unplugin-vue-components安装问题解析

    这篇文章主要为大家介绍了unplugin-auto-import与unplugin-vue-components问题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 一步一步实现Vue的响应式(对象观测)

    一步一步实现Vue的响应式(对象观测)

    这篇文章主要介绍了一步一步实现Vue的响应式(对象观测),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 关于element-ui 单选框默认值不选中的解决

    关于element-ui 单选框默认值不选中的解决

    这篇文章主要介绍了关于element-ui 单选框默认值不选中的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • element中async-validator异步请求验证使用

    element中async-validator异步请求验证使用

    本文主要介绍了element中async-validator异步请求验证使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 浅谈vue中组件绑定事件时是否加.native

    浅谈vue中组件绑定事件时是否加.native

    今天小编就为大家分享一篇浅谈vue中组件绑定事件时是否加.native,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue加载自定义的js文件方法

    vue加载自定义的js文件方法

    下面小编就为大家分享一篇vue加载自定义的js文件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论