自定义滚动条 Mixin

滚动条是那些几乎出现在互联网上每个页面的 UI 组件之一，但我们（开发人员）对它几乎没有控制权。 一些浏览器允许我们自定义其外观，但对于大多数浏览器（包括 Firefox）来说，这根本不可能。

滚动条的样式已有一些更新和标准化。 查看 滚动条样式的现状 了解最新信息，您可以将其移植到 mixin。

尽管如此，Chrome 和 Internet Explorer（是的）允许我们为滚动条定义自定义样式。 然而，语法非常复杂，当然，也绝对不是标准的。 欢迎来到专有世界。 这就是你可能想要一个简单的 mixin 来轻松自定义你的滚动条的原因。 对吧？

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }

  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

使用

body {
  @include scrollbars(10px, pink, red);
}
.custom-area {
  @include scrollbars(.5em, slategray);
}

例子

更进一步

在这两种浏览器上，除了颜色和大小之外，还有更多选择。 但是，它们经常被忽略，所以我认为没有必要用这些选项来塞满 mixin。 随时可以使用额外的选项构建更高级的 mixin。

进一步阅读

• 内嵌和定制 WebKit 滚动条
• 在 Webkit 中自定义滚动条
• 使用 CSS 为 IE 和 Chrome 自定义滚动条