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