Javascript 如何在css中开始滚动时重新创建mac滚动条淡入淡出

我从以下几点开始：

*::-webkit-scrollbar {

}

*::-webkit-scrollbar-button {

}

*::-webkit-scrollbar-track {


}

*::-webkit-scrollbar-track-piece {

}

*::-webkit-scrollbar-thumb:active {
  width: 6px;
  background-color: red;
}

*::-webkit-scrollbar-corner {

}

*::-webkit-resizer {

}

我如何在滚动条中重新创建动画/淡入淡出的功能？只有当您开始滚动时，当您将鼠标悬停在滚动条上时，滚动条才会变宽。现在，如果我尝试使用这些方法来设置样式，它将永久存在。我需要自定义JavaScript来完成这项工作，还是有其他方法

---

我只想更改所有滚动条的背景图像，但它仍然像所有现有的mac滚动条一样工作。

我没有一个纯CSS解决方案供您使用，我倾向于在JS中使用（与我无关）

添加库后，只需使用以下jQuery对其进行初始化：

$('.container').mCustomScrollbar({
    theme: "dark-3", // some theme examples: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
    autoExpandScrollbar: true, //options list can be found here http://manos.malihu.gr/jquery-custom-content-scroller/#configuration-section
    autoHideScrollbar: true
});

下面是一个工作示例：

$（'.container'）.mCustomScrollbar({
主题：“黑暗-3”，
autoExpandScrollbar:true，
自动隐藏滚动条：true
});
.container{
宽度：200px；
高度：100px；
溢出：隐藏；
背景色：#fafafa；
填充：10px；
边框：1px纯黑；
}
.货柜{
保证金：5px0；
}

这是一个测试1

这是一个测试2

这是一个测试3

这是一个测试4

这是一个测试5

这是一个测试

这是一个测试7

这是一个测试8

这是一个测试9

这是一个测试10

这是一个测试11

这是一个测试12

这是一个测试13

这是一个测试

这是一个测试15

这是一个测试16

这是一个测试

如果无法在CSS中实现，那么知道如何在vanilla JS中实现（与jQuery或库相反）会很有帮助。@LancePollard-我完全同意你的看法-如果没有人能为你提供vanilla JS解决方案，这仍然是一个有效的解决方案，但祝你好运！）