4

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

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

我怎样才能让它一直可见？

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

演示

4

7 回答 7

8

来自完美滚动条 wiki：

如何使滚动条始终可见？

默认隐藏的原因是使用了 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>
于 2016-11-11T13:18:58.757 回答
3

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

警告，请确保在加载数据后进行调用，在 VueJS 上，我必须在 'nextTick' 函数中执行此操作：

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

我想超时也可能有效。

于 2017-11-20T14:55:31.533 回答
1 
 .ps__rail-x,
.ps__rail-y {
  opacity: 0.6;
}

这对我有用。

于 2020-06-22T07:28:25.420 回答
0

试试这个。即使您的应用程序中不存在容器类，这也将起作用

.ps> .ps__scrollbar-x-rail, .ps> .ps__scrollbar-y-rail{
    opacity: 0.6;
}
于 2017-10-18T11:41:51.810 回答
0

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

.ps > .ps__rail-x,
.ps > .ps__rail-y {
  opacity: 0.6;
}
于 2020-02-04T08:13:12.237 回答
-1 
<!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>
于 2016-11-11T13:20:00.610 回答
-1

我遇到过同样的问题。确保首先呈现内容，然后创建滚动条。无需更改 CSS。我正在使用完美滚动条.jquery.js

于 2019-08-06T22:47:03.883 回答