Saber 酱的抱枕

如果你使用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的滚动条样式