javascript - 使完美的滚动条默认可见

Question

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

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

如何使它始终可见？

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

Demo

Answer 1

来自 perfectscrollbar wiki:

How can I make the scrollbars always visible?

The reason why it's hidden by default is that opacity: 0 is used. Please change all references of it to opacity: 0.6. If using .scss, modify the line @include opacity(0) to @include opacity(0.6) in the scrollbar-rail-default mixin and run gulp build to build .css and .min.css files.

If you're not willing to modify the CSS files but would like to make it always visible, please add following lines anywhere after perfect-scrollbar.css is loaded.

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

Also, an example code may be helpful to see how to achieve it.

这是例子 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>