vue 滚动条位置,vue中div出现滚动条
这篇文章主要为大家详细介绍了某视频剪辑软件实现滚动条始终悬浮在页面最下方，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现滚动条始终悬浮在页面最下方的具体代码，供大家参考，具体内容如下
需求
表格宽高都超出浏览器显示大小，横向滚动条需要始终浮在最下方便于滚动展示数据
思路
在表格下方添加一个滚动条容器，并且采用位置：固定定位始终浮在页面下方。
在通过滚动事件绑定该容器与表格的横向滚动同步。
在表格内容小于浏览器显示高度时，只展示表格滚动条。
实现
div class= tab-table id= tab table @ scroll= sysHandleScroll() @ mouse over= change flag(false)
divtable/div
！-滚动条-
差异
v-show= tableHeight=客户端高度
class=表格滚动
id=externalForm
@scroll=handleScroll()
@mouseover=changeFlag(true)
:style= { width:` $ {屏幕宽度 px } `}
div:style= { width:` $ { list width px } `} style= height:5px /div
/div
/div
脚本
导出默认值{
data() {
返回{
屏幕宽度：0,
列表宽度：0,
标志：假，
客户端高度：0,
tableHeight: 0，
};
},
已安装(){
这个。setsize()；
窗户。addevent侦听器( resize ，this.setSize，false)；
这个. nextTick(()={
这个。客户高度=文档。文档元素。客户身高；
这个。tableheight=文档。getelementbyid( tab表).客户端高度；
});
},
卸载之前(){
窗户。removeeventlistener( resize ，this.setSize，false)；
},
方法：{
setSize: function () {
这个。屏幕宽度=文档。getelementbyid( tab表).偏移距离
这个。列表宽度=0；
这个。列表标题。列表。foreach((item)={
这个。列表宽度=this。项目列表宽度。长度* 10；
});
如果(这个。此列表宽度。屏幕宽度){
这个。列表宽度=this。屏幕宽度；
}
},
changeFlag(flag) {
this.flag=flag
},
//左右滚动条滚动同步
sysHandleScroll() {
如果(!this.flag) {
文档。getelementbyid(“外部表单”).scrollLeft=
文档。getelementbyid( tab表).滚动左
}
},
handleScroll() {
文档。getelementbyid( tab表).scrollLeft=
文档。getelementbyid(“外部表单”).滚动左
},
},
};
/脚本
半铸钢钢性铸铁(铸造半钢)。选项卡-表格{
边距：0 16px 15px 16px
溢出-x:自动；
空白：nowrap
}。表格-滚动{
高度：5px
位置：固定；
底部：0;
溢出-x:自动；
溢出-y:隐藏；
z指数：12;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。