vue实现滚动条始终悬浮在页面最下方
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
