默认情况下使完美的滚动条可见

Question

我正在为自定义滚动条使用完美的滚动条。它工作正常。

但是滚动条只有在您将鼠标悬停在容器上时才可见。

我如何让这个一直可见？

$('.container').perfectScrollbar();

演示

Answer 1

来自完美滚动条维基：

如何使滚动条始终可见？

默认情况下隐藏它的原因是使用了 opacity: 0。请将它的所有引用更改为不透明度：0.6。如果使用 .scss，请将 scrollbar-rail-default mixin 中的行 @include opacity(0) 修改为 @include opacity(0.6) 并运行 gulp build 以构建 .css 和 .min.css 文件。

如果您不愿意修改 CSS 文件但希望使其始终可见，请在加载 Perfect-scrollbar.css 后的任何位置添加以下行。

.ps-container > .ps-scrollbar-x-rail, .ps-container > .ps-scrollbar-y-rail { opacity: 0.6; }

此外，示例代码可能有助于了解如何实现它。

这是示例https://github.com/noraesae/perfect-scrollbar/blob/master/examples/always-visible.html

因此，如果您通过将以下内容粘贴到您的 html 中来修改您的 JSFiddle，它会起作用。

<div class="container">
  <div class="content"></div>
</div>

<style>
    .ps-container > .ps-scrollbar-x-rail,
    .ps-container > .ps-scrollbar-y-rail {   opacity: 0.6; }
 </style>