javascript - 如何在 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 {

}

如何重新创建滚动条的动画/淡入淡出功能仅当您开始滚动，然后当您将鼠标悬停在滚动条上时，它会变宽。现在，如果我尝试使用这些方法设计它的样式，它就会永久存在。我需要自定义 JavaScript 来执行此操作还是有其他方法？

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

Answer 1

我没有适合您的纯 CSS 解决方案，我倾向于使用 a custom scrollbar library 在 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>