vue實現(xiàn)滾動條始終懸浮在頁面最下方

更新時間：2022年04月11日 15:08:53 作者：Cardhu丶

這篇文章主要為大家詳細介紹了vue實現(xiàn)滾動條始終懸浮在頁面最下方，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)滾動條始終懸浮在頁面最下方的具體代碼，供大家參考，具體內(nèi)容如下

需求

表格寬高都超出瀏覽器顯示大小，橫向滾動條需要始終浮在最下方便于滾動展示數(shù)據(jù)

思路

在表格下方添加一個滾動條容器，并且采用position: fixed定位始終浮在頁面下方。
在通過滾動事件綁定該容器與表格的橫向滾動同步。
在表格內(nèi)容小于瀏覽器顯示高度時，只展示表格滾動條。

實現(xiàn)

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: