火狐浏览器滚动条的样式问题

阅读数:10 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、chrome等webkit的浏览器

.el-table {
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 10px; /*滚动条宽度*/
      height: 10px; /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/
      border-radius: 10px; /*滚动条的背景区域的圆角*/
      background-color: #071e4a; /*滚动条的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/
      border-radius: 10px; /*滚动条的圆角*/
      background-color: #00a0e9; /*滚动条的背景颜色*/
  }
}

二、firefox

overflow-y: scroll;
///scrollbar-color 的第一个值是滚动条的颜色,第二个值是滚动条轨道背景色。
scrollbar-color: transparent transparent;
scrollbar-track-color: transparent;
-ms-scrollbar-track-color: transparent;
scrollbar-width: none; /* 隐藏滚动条,但是元素还是可以滚动 */