码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • vue3+elementPlus table滚动条样式覆盖


    1. /* ---el-table滚动条公共样式--- */
    2. .el-scrollbar {
    3.   // 横向滚动条
    4.   .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
    5.     opacity: 1; // 默认滚动条自带透明度
    6.     height: 8px; // 横向滑块的宽度
    7.     border-radius: 2px; // 圆角度数
    8.     background-color: rgba(136, 219, 255, 1); // 滑块背景色
    9.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
    10.   }
    11.   // 纵向滚动条
    12.   .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
    13.     opacity: 1;
    14.     width: 8px; // 纵向滑块的宽度
    15.     border-radius: 2px;
    16.     background-color: rgba(136, 219, 255, 1);
    17.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    18.   }
    19. }

    补充---原生滚动条样式修改:

    1. /* ---滚动条公共样式--- */
    2. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    3. ::-webkit-scrollbar {
    4. width: 8px;
    5. height: 8px;
    6. }
    7. /*定义滚动条轨道 内阴影+圆角*/
    8. ::-webkit-scrollbar-track {
    9. -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); /*轨道阴影*/
    10. border-radius: 0px; /*轨道背景区域的圆角*/
    11. background-color: transparent; /*轨道的背景颜色*/
    12. }
    13. /*定义滑块 内阴影+圆角*/
    14. ::-webkit-scrollbar-thumb {
    15. border-radius: 2px; /*滑块圆角*/
    16. -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /*滑块外阴影*/
    17. background-color: rgba(136, 219, 255, 1); /*滑块背景颜色*/
    18. }

  • 相关阅读:
    细节炸裂!阿里大佬深入探究G1源码之YoungGC技术
    前端CSS零碎知识点
    Uni-app中实现数据选择并回传给上个页面的方法
    2022-11-05 mysql-派生表-解读
    springboot使用切面记录接口访问日志
    从一到无穷大 #2 优雅的感知与处理Elephant Flows
    YOLOv7优化:渐近特征金字塔网络(AFPN)| 助力小目标检测
    算法进阶-2sat-cf-1697F
    vue-pdf实现pdf文件预览和分页
    ElasticSearch集群配置
  • 原文地址:https://blog.csdn.net/beihenanfei/article/details/133941840
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号