关于css:兼容火狐的滚动条样式

53次阅读

共计 529 个字符,预计需要花费 2 分钟才能阅读完成。

.beauty-scroll {scrollbar-color: #1890ff #91d5ff; /* 第一个方块色彩,第二个轨道色彩 ( 用于更改火狐浏览器款式) */
  scrollbar-width: thin; /* 火狐滚动条无奈自定义宽度,只能通过此属性使滚动条宽度变细 */
  -ms-overflow-style: none; /* 暗藏滚动条(在 IE 和 Edge 两个浏览器中很难更改款式,固采取暗藏形式)*/

  /* 以下是 chrome 浏览器自定义滚动条款式形式 */
  &::-webkit-scrollbar {
    /* 滚动条整体款式 */
    width: 3px; /* 高宽别离对应横竖滚动条的尺寸 */
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /* 滚动条外面小方块 */
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    background: #dfdfdf;
  }
  &::-webkit-scrollbar-track {
    /* 滚动条外面轨道 */
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    border-radius: 3px;
    background: #fff;
  }
}

正文完
 0