使完美的滚动条默认可见

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>

Answer 2

<!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 3

试试这个。即使容器 class 在您的应用程序

中不存在，这也会起作用

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

Answer 4

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

警告，确保调用是在加载数据后进行的，在 VueJS 上我必须在 'nextTick' 函数中进行调用：

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

我想超时也可以。

Answer 5

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

Answer 6

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

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

Answer 7

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

这对我有用。

使完美的滚动条默认可见

Make perfect scrollbar visible by default

javascript

css

jquery

custom-scrolling