在CSS滚动开始时，如何重新创建MAC滚动板逐渐淡出

Question

我是从此开始的：

*::-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 {
}

仅在开始滚动时，我如何重新创建scrollbar 的动画/褪色功能，然后当您悬停在滚动条上时，现在，如果我尝试使用这些方法对其进行样式，则它是永久存在的。我需要自定义的JavaScript来执行此操作还是有其他方法？

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

Answer 1

我没有适合您的纯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({
  theme: "dark-3",
  autoExpandScrollbar: true,
  autoHideScrollbar: true
});

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
  background-color: #fafafa;
  padding: 10px;
  border: 1px solid black;
}
.container p {
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet" />
<div class="container">
  <p>This is a test 1</p>
  <p>This is a test 2</p>
  <p>This is a test 3</p>
  <p>This is a test 4</p>
  <p>This is a test 5</p>
  <p>This is a test 6</p>
  <p>This is a test 7</p>
  <p>This is a test 8</p>
  <p>This is a test 9</p>
  <p>This is a test 10</p>
  <p>This is a test 11</p>
  <p>This is a test 12</p>
  <p>This is a test 13</p>
  <p>This is a test 14</p>
  <p>This is a test 15</p>
  <p>This is a test 16</p>
  <p>This is a test 17</p>
</div>