若依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;
  }
}
相关推荐
也无晴也无风雨33 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
内蒙深海大鲨鱼5 小时前
qt之ui开发
数据库·qt·ui
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js