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

这篇文章主要为大家详细介绍了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; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。

以上就是vue实现滚动条始终悬浮在页面最下方的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程