vue實現(xiàn)滾動條始終懸浮在頁面最下方
更新時間：2022年04月11日 15:08:53 作者：Cardhu丶
這篇文章主要為大家詳細介紹了vue實現(xiàn)滾動條始終懸浮在頁面最下方，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)滾動條始終懸浮在頁面最下方的具體代碼，供大家參考，具體內容如下
需求
表格寬高都超出瀏覽器顯示大小，橫向滾動條需要始終浮在最下方便于滾動展示數(shù)據(jù)
思路
在表格下方添加一個滾動條容器，并且采用position: fixed定位始終浮在頁面下方。
在通過滾動事件綁定該容器與表格的橫向滾動同步。
在表格內容小于瀏覽器顯示高度時，只展示表格滾動條。
實現(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;
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何在vue.config.js文件中導入模塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
多個vue項目實現(xiàn)共用一個node-modules文件夾
這篇文章主要介紹了多個vue項目實現(xiàn)共用一個node-modules文件夾，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中ref標簽屬性和$ref的關系，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本文主要介紹了Vue3中10多種組件通訊方法小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
unplugin-auto-import與unplugin-vue-components安裝問題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了一步一步實現(xiàn)Vue的響應式(對象觀測)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了關于element-ui?單選框默認值不選中的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
element中async-validator異步請求驗證使用
本文主要介紹了element中async-validator異步請求驗證使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
今天小編就為大家分享一篇淺談vue中組件綁定事件時是否加.native，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
下面小編就為大家分享一篇vue加載自定義的js文件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03