火狐、谷歌浏览器滚动轴样式修改

最新推荐文章于 2024-05-21 09:39:34 发布

原创最新推荐文章于 2024-05-21 09:39:34 发布 · 570 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #chrome

本文介绍如何使用CSS自定义火狐浏览器及谷歌浏览器中表格滚动条的样式，包括宽度、颜色及动画效果等，实现了不同浏览器下一致且美观的滚动条表现。

火狐浏览器

.el-table__body-wrapper {
  transition: all 1s;
  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.el-table__body-wrapper:hover {
  /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
  scrollbar-color: rgba(144, 147, 153, .3) white;
}

谷歌浏览器

/*修改Chrome浏览器下table默认滚动轴样式*/
.el-table__body-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(144, 147, 153, .3);
}

添加动画效果的谷歌浏览器滚动轴样式修改

.el-table__body-wrapper {
  -webkit-transition: color 1s;
  transition: color 1s;
  text-shadow: 0 0 #606266;
  color: transparent;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0 5px; /*用box-shadow模拟滚动条*/ 
}

.el-table__body-wrapper:hover {
  color: rgba(144,147,153,.3) !important;
}

.el-table__body-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}