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 滚动条一样工作。

标签： javascripthtmlcsswebkitscrollbar

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>