在使用elementui 表格组件时,会遇到一个问题,表格过大而无法显示完全,要把横向内容看完整就需要滚动到列表底部拉动横向滚动条,十分不方便。
因此,我想自定义滚动条显示在视窗底部:
<!--自定义滚动条-->
<div class="out-box" ref="out-box">
<img style="margin-left:-20px;position:fixed;bottom:0px;" src="http://img.s.youfenba.com/material_thumb/74NGnHkeQs.png">
<div class="in_box" @mousedown="mouseDown" @mouseup="mouseUp" @mouseout="mouseUp" :style="old_new" ref="in_box" > </div>
<!--用ref对里边的灰色滚动条进行绑定,写上对应的事件-->
<img style="position:fixed;bottom:0px;right:40px;" src="http://img.s.youfenba.com/material_thumb/WTzsMr6RSX.png">
</div>
data(){
return{
//自定义滚动条数据设置
newx: "", //第一次的坐标
oldx: "", //第二次的坐标
outBoxWidth: '', //滚动条长度
moveWidth: "", //可移动的长度
old_new:{
//滚动条的偏移量
left: 0
},
windowWidth: document.body.clientWidth -280, //表格宽度(网页可见宽度-左侧菜单栏宽度)
f:0,
leftstr: '',
//滚动条参数
}
}
//监听视窗大小
mounted() {
const that = this;
window.onresize = function() {
//监听浏览器窗口
that.ifmove();
};
this.ifmove(); //页面进来先判断
},
//滚动条事件
ifmove(){
let that = this;
that.windowWidth = document.body.clientWidth - 1000;
if (that.windowWidth < 1920) {
that.$refs.out_box.style.display = "block";
that.$refs.in_box.style.width =
(that.windowWidth / 1920) * that.windowWidth + "px"; //显示区域占百分比,在滚动条显示
that.moveWidth = (1 - that.windowWidth / 1920) * that.windowWidth; //可移动宽度
} else {
that.$refs.out_box.style.display = "none";
}
},
//滚动条事件
mouseDown(event) {
let e = event || window.event;
let _self = this;
this.f = 1;
this.newx = e.clientX;
this.leftstr = this.old_new.left
this.$refs.in_box.addEventListener("mousemove", function(event) {
let e = event || window.event;
_self.oldx = e.clientX;
_self.moveWidth = (1 - _self.windowWidth / 1920) * _self.windowWidth-parseFloat(_self.leftstr); //模拟滚动条可移动长度
if (_self.f) {
_self.old_new.left =
_self.oldx - _self.newx <= -parseFloat(_self.leftstr)
? "0px"
: _self.oldx - _self.newx >= _self.moveWidth
? _self.moveWidth + parseFloat(_self.leftstr) + "px"
: _self.oldx - _self.newx + parseFloat(_self.leftstr) + "px"; //模拟滚动条偏移量
_self.$refs.scroll.scrollLeft =
_self.oldx - _self.newx <= -parseFloat(_self.leftstr)
? 0
: _self.oldx - _self.newx >= _self.moveWidth
?(_self.moveWidth + parseFloat(_self.leftstr))* (1920 / _self.windowWidth)
: (_self.oldx - _self.newx + parseFloat(_self.leftstr) ) * (1920 / _self.windowWidth); //实际滚动条偏移量
}
});
},
mouseUp() {
this.f = 0;
},