saber酱的抱枕

Fly me to the moon

04/9
13:57
学习

修改chrome的滚动条样式

如果你使用chrome访问本网站,你应该能看到本站的滚动条样式是自定义的。那我们要如何做呢?

其实chrome内置了一些伪类,使用它们可以控制滚动条的外观。例如:(less 语法)

.beautify_scrollbar {

  // 滚动条整体 
  // width 是垂直滚动条的宽度,height 是水平滚动条的高度
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  // 整个滚动条的底色
  //&::-webkit-scrollbar-track {background:#fcfcfc;}

  // 滚动条的滑块部分
  &::-webkit-scrollbar-thumb {
    background-color: #3AB8F2;
    border-radius: 10px;
  }

  // 垂直滚动条的滑块部分
  // &::-webkit-scrollbar-thumb:vertical {
  //   background-color: #3AB8F2;
  //   border-radius: 10px;
  // }

  // 水平滚动条的滑块部分
  // &::-webkit-scrollbar-thumb:horizontal {
  //   background-color: #3AB8F2;
  //   border-radius: 10px;
  // }
}

如果你要对特定元素设置滚动条,而不是对整个页面设置,那么需要在伪类前面加上这个元素的选择器。

Read More →

修改chrome的滚动条样式