css修改overflow-x滚动条默认样式

页面部分:
<div class="nr8-box">
	<div class="overflowX">
	<table>
	</table>
</div>
</div>

CSS部分:
.nr8 .nr8-box{width:2000px;}
.overflowX {
    width:1500px;
	overflow-x: scroll;
}
.overflowX::-webkit-scrollbar{   /*滚动条基本样式,高度*/
	width:4px;height:4px;
}
.overflowX::-webkit-scrollbar-thumb {/*滚动条上层颜色*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
.overflowX::-webkit-scrollbar-track {/*滚动条底层颜色*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
}
table{width:2000px;}




要在火狐浏览器(Firefox)下自定义Element UI (Vue中的表格组件el-table)的滚动条样式,你需要通过CSS来覆盖默认样式。因为浏览器对滚动条样式控制有限,尤其像Firefox这样的默认滚动条通常不可直接修改,但可以尝试使用一些技巧,比如利用伪元素`::-webkit-scrollbar`(针对Webkit内核,包括Chrome和Safari)或`::-moz-scrollbar`(Firefox的专属)来改变外观。 首先,在你的CSS文件中创建一个新的类,例如`.custom-scrollbar`: ```css .custom-scrollbar { overflow-y: auto; -ms-overflow-style: none; /* IE 和 Edge */ } .custom-scrollbar::-webkit-scrollbar { width: 8px; /* 滚动条宽度 */ } .custom-scrollbar::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.1); /* 轨道颜色 */ } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #6c757d; /* 滚动块颜色 */ border-radius: 4px; } /* Firefox 特有的滚动条样式 */ .custom-scrollbar:-moz-scrollbar { width: 8px; } .custom-scrollbar:-moz-scrollbar-thumb { background-color: #6c757d; border-radius: 4px; } ``` 然后,将这个类应用到你的el-table上: ```html <template> <el-table :class="['custom-scrollbar', tableClass]"> <!-- 表格内容 --> </el-table> </template> <script> export default { data() { return { tableClass: '', // 这里可以根据需要添加其他类名 }; }, }; </script> ``` 这会使得火狐下的滚动条采用定制的颜色和样式。请注意,由于火狐对于`-moz-scrollbar`的支持不如WebKit广泛,某些效果可能会有所差异。如果你希望所有现代浏览器都有良好的体验,最好还是考虑使用JavaScript库如better-scroll等提供更丰富的滚动条替代方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赖赖赖先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值