自定义滚动条混合

滚动条是Internet几乎每个页面上都存在的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);
}

例

见笔萨斯混入的滚动条造型雨果Giraudel（ @HugoGiraudel ）上CodePen 。

更进一步

在这两种浏览器中，除了颜色和大小以外，还有更多选择。 但是，它们经常被忽略，因此我认为使用这些选项将mixin过度拥挤是不值得的。 随意构建带有更多选项的更高级的mixin。

进一步阅读：

• 嵌入式和自定义WebKit滚动条
• Webkit中的自定义滚动条
• 使用CSS的IE和Chrome自定义滚动条

翻译自: https://css-tricks.com/snippets/sass/custom-scrollbars-mixin/