Question

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

但只有当您将鼠标悬停在容器上时，滚动条才会显示。

如何让它始终可见？

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

Demo

Answer 1

来自perfectscrollbar wiki：

如何让滚动条始终可见？

默认情况下隐藏它的原因是使用了不透明度：0。   请将其所有引用更改为不透明度：0.6。如果使用.scss，   将行@include opacity（0）修改为@include opacity（0.6）   scrollbar-rail-default mixin和run 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>

Answer 2

此外，您必须确保在正确的时间更新完美滚动条。如果内容是动态加载的，请致电ps.update()。

警告，请确保在加载数据后进行通话，在VueJS上我必须在＆＃39; nextTick＆＃39;功能：

    this.$nextTick(() => {
          ps.update();
      });
    },

我想超时也可能有效。

Answer 3

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>perfect-scrollbar example</title>
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
      h1 { text-align: center; }
      .container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .container .content { background-color: red; width: 1280px; height: 720px; }
    </style>
    <style>
      /* to make scrollbars always visible */
      .always-visible.ps-container > .ps-scrollbar-x-rail,
      .always-visible.ps-container > .ps-scrollbar-y-rail {
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <h1>Default</h1>
    <div class="container">
      <div class="content">
      </div>
    </div>

    <h1>Always visible</h1>
    <div class="container always-visible">
      <div class="content">
      </div>
    </div>
    <script>
      window.onload = function () {
        [].forEach.call(document.querySelectorAll('.container'), function (el) {
          Ps.initialize(el);
        });
      };
    </script>
  </body>
</html>

Answer 4

试试这个。即使您的应用程序中不存在容器类

，这也会起作用

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

Answer 5

我有同样的问题。确保先渲染内容，然后再创建滚动条。无需更改CSS。我正在使用 perfect-scrollbar.jquery.js

Answer 6

我正在 Angular 8 中使用ngx-perfect-scrollbar，并通过添加以下样式来解决了问题

def srch_knums(col1, knum_search, col2):
    return next(iter(df.loc[df[col1] == knum_search, col2]), 'no match')

test = srch_knums('DeviceNumber', int(13), 'StoreNumber')
print (test)
410

Answer 7

 .ps__rail-x,
.ps__rail-y {
  opacity: 0.6;
}

这对我有用。

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

7 个答案: