若依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;
  }
}
相关推荐
paopaokaka_luck2 分钟前
基于SpringBoot+Vue的少儿编程培训机构管理系(WebSocket及时通讯、协同过滤算法、Echarts图形化分析)
java·vue.js·spring boot·后端·spring
qq. 280403398412 分钟前
react hooks
前端·javascript·react.js
LHX sir1 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S1 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
小光学长1 小时前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Y学院1 小时前
vue的组件通信
前端·javascript·vue.js
PairsNightRain2 小时前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
小岛前端2 小时前
React 剧变!
前端·react.js·前端框架
teeeeeeemo2 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
Greg_Zhong2 小时前
vue项目安装使用,npm、webpack版本问题注意
vue.js·npm版本、webpack版本