修改element-ui中的表格el-table滚动条样式

前端攻城狮·左大

已于 2022-04-27 11:27:43 修改

阅读量821

点赞数

分类专栏： JavaScript CSS 文章标签： ui javascript vue.js

于 2021-12-31 11:34:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46719868/article/details/122252337

版权

JavaScript 同时被 2 个专栏收录

32 篇文章

订阅专栏

CSS

15 篇文章

订阅专栏

这篇博客主要探讨了如何修改Web页面中滚动条的样式，首先展示了针对特定组件的滚动条样式的定制，如设置`/deep/.el-table__body-wrapper::-webkit-scrollbar`的宽度和滑块颜色。然后，进一步讲解了全局滚动条样式的修改，通过`::-webkit-scrollbar`选择器统一调整滚动条的宽度和滑块背景色，增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单独样式的修改：

  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; 
    height: 6px; 
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }

全局样式修改

//滚动条的宽度
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}