若依ruoyi-vue element-ui 横向滚动条 动态横向滚动条

动态横向滚动条

因为每次横向滑动都要到底部,引入插件
https://github.com/mizuka-wu/el-table-horizontal-scroll

css 复制代码
//动态横向滚动条移入样式
.el-table-horizontal-scrollbar :hover{
  //高度 变大10%
  transform: scaleY(1.5) translateY(-10%);
  //百分之八十亮度,加深
  filter: brightness(0.8);
  background-color: #C0C0C0;
}

//动态横向滚动条默认样式
.el-table-horizontal-scrollbar {
  transform: scaleY(1.5);
  background-color: #C0C0C0;
}
css 复制代码
/* 默认底部横向滚动条样式 el-table自带的滚动条变大 */
.el-table__body-wrapper::-webkit-scrollbar {
  // 表格右侧滚动
  width: 15px !important;
  // 表格下方滚动
  height: 15px !important;
}

/**  设置默认底部横向滚动条样式,el-table自带的滚动条变大 */
.el-table__body-wrapper, .el-scrollbar__wrap {
  &::-webkit-scrollbar {
    width: 15px;
    height: 15px;
  }
}
相关推荐
全宝16 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele40 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮1 小时前
【无标题】
开发语言·前端·javascript
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃3 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军3 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子3 小时前
Blob 对象及 Base64 转换指南
前端