滚动条样式重置

兼容性

• 主webkit
  • 相信IE6已经远离我们而去，请把“IE6”这个词遗忘吧，毕竟面试和各大前端是很少出现了

属性

• ::-webkit-scrollbar 滚动条整体部分 (1)
• ::-webkit-scrollbar-button 滚动条两端的按钮(2)
• ::-webkit-scrollbar-track 外层轨道 (3)
• ::-webkit-scrollbar-track-piece 内层滚动槽 (4)
• ::-webkit-scrollbar-thumb 滚动的滑块(5)
• ::-webkit-scrollbar-corner 边角 (6)
• ::-webkit-resizer 右下角拖动块 (7)

图片描述

源码

// 通配符重置所有标签的滚动条样式
* {
  /*滚动条整体部分*/
  &::-webkit-scrollbar {
  }
  /*滚动条两端的箭头*/
  &::-webkit-scrollbar-button {
  }
  /*滚动条内侧部分 去掉*/
  &::-webkit-scrollbar-track-piece {
  }
  /*滚动条中可以拖动的那部分*/
  &::-webkit-scrollbar-thumb {
  }
  /*边角部分*/
  &::-webkit-scrollbar-corner {
    display: none;
  }
  /*右下角拖动块*/
  &::-webkit-resizer {
    display: none;
  }
}