『CSS滚动条 完整兼容』一劳永逸，无副作用

但，还是可以调一下。总所周知！-webkit

webkit

// 窄一点
body::-webkit-scrollbar {
    width: 10px;
    height: 10px; // 顺便写了
}
// 颜色淡一点，圆一点
body::-webkit-scrollbar-thumb {
    background: hsl(0deg 0% 90%);
    border-radius: 5px;
}

这就够了，挺不错的。一切都好，但Firefox不行。

Firefox

还好Firefox有这个：scrollbar-width、scrollbar-color

html {
    scrollbar-width: thin;
    scrollbar-color: hsl(0deg 0% 90%) transparent;
}

IE

我们看一下IE。

等等，其实还是可以抢救一下的（但只能设置颜色）

body {
  scrollbar-base-color: green;
  scrollbar-track-color: red;
  scrollbar-arrow-color: blue;
  scrollbar-3dlight-color: yellow;
  scrollbar-shadow-color: pink;
  scrollbar-highlight-color: transparent;
}

一劳永逸

每个div都要专门去写很麻烦？那就一次写完吧。

* {
    scrollbar-width: thin;
    scrollbar-base-color: green;
    scrollbar-track-color: red;
    scrollbar-arrow-color: blue;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-thumb {
    background: hsl(0deg 0% 90%);
    border-radius: 3px;
}

优雅一点

那就和老伙计box-sizing放一块

html {
    box-sizing: border-box;
    scrollbar-width: thin;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    scrollbar-width: inherit;
}

// 伪元素无法继承
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-thumb {
    background: hsl(214, 13%, 75%);
    border-radius: 4px;
}

关闭滚动条

为了设计，需要滚掉滚动条，设置none即可

div {
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
}