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

本文实例为大家分享了vue实现滚动条始终悬浮在页面最下方的具体代码，供大家参考，具体内容如下

需求

表格宽高都超出浏览器显示大小，横向滚动条需要始终浮在最下方便于滚动展示数据

思路

在表格下方添加一个滚动条容器，并且采用position: fixed定位始终浮在页面下方。
在通过滚动事件绑定该容器与表格的横向滚动同步。
在表格内容小于浏览器显示高度时，只展示表格滚动条。

实现

    
table
    
    

        

    

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。