elementplus全局美化滚动条vue

雨点打透心脏的1/2处 2024-03-22 14:55 184阅读 0赞

在全局style.css中引入以下代码

/**修改全局的滚动条*/
/**滚动条的宽度*/
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: #eaecf1;
    border-radius: 3px;
}
/*表格*/
.el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
}

改完后

以上是我从别的文章中找到的可行方法：

element-ui修改浏览器全局的默认滚动条样式_element ui修改浏览器默认滚动条_Neo_LJH的博客-CSDN博客

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 css美化浏览器滚动条

独使用css的方法虽然简单，但只有chrome兼容好，ie只能改滚动条颜色，火狐不支持css修改 1.先看chrome滚动条每部分的名字（直接引用的[https://w...

小灰灰/ 2024年04月17日 05:26/ 0 赞/ 202 阅读

相关滚动条美化

滚动条美化1 body { height: 2000px; width: 100

淡淡的烟草味﹌/ 2024年04月07日 12:26/ 0 赞/ 206 阅读

相关 elementplus全局美化滚动条vue

在全局style.css中引入以下代码 /修改全局的滚动条/ /滚动条的宽度/ ::-webkit-scrollbar { width: 8

雨点打透心脏的1/2处/ 2024年03月22日 14:55/ 0 赞/ 185 阅读

相关 vue全局修改滚动条样式

::-webkit-scrollbar — 整个滚动条 ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头) ::-webkit-sc

不念不忘少年蓝@/ 2023年10月09日 19:21/ 0 赞/ 174 阅读

相关 Vue全局监听滚动条事件

项目需求滚动条大于200时候，头部固定定位，小于的时候相对定位，监听滚动条事件： // 全局监听，写在App.vue里面 methods: {

拼搏现实的明天。/ 2023年07月24日 03:21/ 0 赞/ 25 阅读

相关 css美化滚动条

::-webkit-scrollbar-track-piece { background-color: fff; -webkit-bor

淡淡的烟草味﹌/ 2023年01月15日 02:19/ 0 赞/ 255 阅读

相关 css美化滚动条，以vue-markdown为例

github：[vue-markdown][] 下面是vue组件化中使用stylus语法其中`>>>` 是为了让组件内也生效 vue组件化开发 >>>

淩亂°似流年/ 2022年10月31日 13:37/ 0 赞/ 284 阅读

相关 QScrollArea qss样式表，美化滚动条

文章目录效果图如下：前言 QSS样式表代码效果图如下： ![在这里插入图片描述][397ecfc09a8e409da

女爷i/ 2022年09月17日 03:11/ 0 赞/ 658 阅读

相关用CSS美化你的滚动条

本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS

你的名字/ 2022年08月07日 14:56/ 0 赞/ 346 阅读

相关用CSS美化你的滚动条

本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS

矫情吗；*/ 2022年08月05日 16:19/ 0 赞/ 346 阅读