vue+element美化table样式+美化浏览器滚动条样式(兼容IE)+隐藏滚动条样式(兼容IE)
公共样式里加:.el-table__body-wrapper::-webkit-scrollbar {width: 6px;height: 6px;}.el-table__body-wrapper::-webkit-scrollbar-thumb {background-color: #ddd;border-radius: 3px;}
·
表格样式-公共样式里加:
.el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 3px;
}
公共浏览器样式 :
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #d5d5d5;
border-radius: 5px;
}
隐藏滚动条-可以鼠标滚动(兼容版):
其中通过其他途径计算出了滚动条的宽度是17px,而且用calc这个方法来计算多出来的滚动条宽度,而父级元素的overflow:hidden;
此时就起作用了,这种做法兼容各个浏览器
.el-card__body{
height:100%;
overflow-y: scroll;
width: -webkit-calc(100% + 17px);
width: -moz-calc(100% + 17px);
width: calc(100% + 17px);
}
vue 鼠标移上去显示滚动条,鼠标离开消失:
jq:
$().hover(function(){
$().css("overflow","auto")
},function(){
$().css("overflow","hidden")
})
element有一个隐藏组件:
<el-scrollbar style="height:100%;">
内容
</el-scrollbar>
element tree加滚动条时注意:
.el-tree>.el-tree-node{
min-width: 100%;
display:inline-block;
}
更多推荐
已为社区贡献15条内容
所有评论(0)